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

Question

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

Answer 1

使用不同的路由器配置 - 由于 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>;
  }
}

并在 <Switch>

中使用它代替您 <Router>

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

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

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

Can I prevent some route to be rendered on server side in React App

routes

reactjs

server-side-rendering

react-router-dom