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

【问题标题】：Can I prevent some route to be rendered on server side in React App我可以阻止在 React App 中的服务器端呈现某些路由吗
【发布时间】：2025-12-13 16:55:02
【问题描述】：

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

【问题讨论】：

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

【解决方案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-router-config。因此，我使用路由作为对象而不是。我还能用你的方法吗？
你可以把它做成一个HOC（Higher-Order Component），把你不想在服务器上渲染的路由包装起来。