reactjs - 在组件内使用react router Link

Question

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

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

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

使用 Link 来保持流畅的页面更改并仍然进行 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'
/>

希望有帮助。