时间戳

首页 > 解决方案 > 我可以阻止在 React App 中的服务器端呈现某些路由吗

reactjs - 我可以阻止在 React App 中的服务器端呈现某些路由吗

问题描述

我将为我的 react 应用程序使用服务器端渲染来改进网站的 SEO。因此，让一些页面在服务器上呈现对我来说很重要。但是，我不想让其余页面（嵌套路由）在服务器端呈现。我可以同时使用不同的路由（和路由的配置）进行客户端和服务器端渲染吗？

标签： reactjsroutesreact-router-domserver-side-rendering

解决方案

使用不同的路由器配置 - 由于 html 未匹配，您将收到反应警告。

要解决此问题，您可以将路由器切换为以下内容：


import React from 'react';
import { Route } from 'react-router-dom';

class RouterHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
    };
  }

  componentDidMount() {
    this.setState({
      isShow: true,
    });
  }

  render() {
    const { isShow } = this.state;
    const { component, ...props } = this.props;
    if (isShow) {
      return <Route {...props} component={component} />;
    }
    return <div>Loading...</div>;
  }
}

<Router>并在里面使用它而不是你<Switch>

这将起作用，因为componentDidMount仅在客户端调用。

使用代码分块用户不会看到差异。

推荐阅读