在组件内部使用反应路由器链接答案

【问题标题】：Using react router Link inside components在组件内部使用反应路由器链接
【发布时间】：2019-10-19 14:03:10
【问题描述】：

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

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

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

什么是使用 Link 仍然有流畅的页面更改并仍然有 SEO 优化的正确方法。

谢谢

【问题讨论】：

用react-helmet怎么样？

标签： reactjs react-router server-side-rendering

【解决方案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'
/>

希望对你有帮助。

【讨论】：

【解决方案2】：

谢谢@luiz-mariz，我已经在使用react-helmet，但问题是我在componentDidMount() 中获取页面信息，但是当我这样做时，爬虫不会读取这些信息，因为它们不会' t 等待 API 调用传递有关内容的信息。那是我的错。

我解决它的方法是使用获取特定页面信息并在页面加载之前（使用服务器端渲染），然后将该信息传递给 App 组件。

onPageLoad((sink) => {

  const context = {};
  const data = {
    loading: true,
    loggingIn: false,
    document:-API CALL FOR DOCUMENT INFO-
  };

  const store = createStore(mainReducer, data, applyMiddleware(thunk));
  const initialData = store.getState();
  const stylesheet = new ServerStyleSheet();

  const app = renderToString(stylesheet.collectStyles( // eslint-disable-line
    <Provider store={store}>
      <StaticRouter location={sink.request.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>));

  const helmet = Helmet.renderStatic();
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.title.toString());
  sink.appendToHead(stylesheet.getStyleTags());

  sink.renderIntoElementById('react-root', app);

  sink.appendToBody(`
    <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(initialData).replace(/</g, '\\u003c')}
    </script>
  `);
});

另外，我在 react-helmet 组件中添加了更多标签。可能对一些想要使用 facebook 或 twitter 共享功能的人有用。

const SEO = ({
  schema, title, description, images, path, contentType, published, updated, category, tags, twitter,
}) => (
  <Helmet>
    <html lang="en" itemScope itemType={`http://schema.org/${schema}`} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <meta itemProp="name" content={title} />
    <meta itemProp="description" content={description} />
    <meta itemProp="image" content={(images && images.google)} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@sitename" />
    <meta name="twitter:title" content={`${title} | Your-site-name`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:creator" content={`@${twitter}` || '@sitename'} />
    <meta name="twitter:image:src" content={(images && images.twitter)} />

    <meta property="og:title" content={`${title} | Your-site-name`} />
    <meta property="og:type" content={contentType} />
    <meta property="og:url" content={url} />
    <meta property="og:image" content={(images && images.facebook)} />
    <meta property="og:description" content={description} />
    <meta property="og:site_name" content="your-site-name" />

    <meta name="fb:app_id" content="your-app-id" />

    {published ? <meta name="article:published_time" content={published} /> : ''}
    {updated ? <meta name="article:modified_time" content={updated} /> : ''}
    {category ? <meta name="article:section" content={category} /> : ''}
    {tags ? <meta name="article:tag" content={tags} /> : ''}
  </Helmet>
);

【讨论】：