在组件内部使用React Router Link

Question

我正在组件内部使用链接来转到不同的页面，例如

 <Link to={'/documents/' + x.id}></Link

但是，这会导致SEO问题，因为页面更改时元标记不会刷新。我也在使用服务器端渲染。

使用链接仍然可以流畅地进行页面更改并且仍可以进行SEO优化的正确方法是什么。

谢谢

Answer 1

我个人通常在我的项目中创建SEO组件以避免出现问题。我也喜欢使用react-helmet，这将管理对<head/>

的所有更改

例如：

import Helmet from "react-helmet";
import React from "react";

// mini SEO component
function SEO ({ title, description, keywords, url, lang }) {
    return (
        <Helmet
            htmlAttributes={{ lang }}
            title={{ title }}
            meta={[
                {
                    name: 'description',
                    content: description
                },
                {
                    name: 'keywords',
                    content: keywords
                },
                {
                    property: 'og:url',
                    content: url
                }
            ]}
        />
    );
}

export default SEO;

因此，请使用所需的道具将其导入每个页面

<SEO 
    title='example'
    description='example'
    keywords=''
    url='https://example.com'
    lang='en-us'
/>

希望有帮助。