react-router-dom嵌套路由刷新空白页，如何在Dashboard内处理子路由？

问题根源 #

你App.js中匹配/dashboard的PrivateRoute添加了exact严格匹配属性，直接导致刷新时访问/dashboard/search路径，App层路由无法匹配到Dashboard组件，Dashboard未渲染的前提下其内部定义的子路由自然不会生效，最终页面空白。
前端点击Link跳转时不会触发应用全量重载，Dashboard组件已经处于挂载状态，因此子路由可以正常匹配渲染，这就是点击正常、刷新异常的原因。
另外你Dashboard组件中额外引入了BrowserRouter属于冗余代码，App层已经包裹了路由实例，子组件重复嵌套路由实例会额外引发路由冲突问题。

解决方案 #

步骤1：修改App.js路由配置 #

移除/dashboard匹配规则的exact属性，保证所有以/dashboard开头的路径都能匹配到Dashboard组件：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Login} exact />
        {/* 移除exact属性 */}
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

export default App;

步骤2：优化Dashboard.js子路由配置 #

删除冗余的BrowserRouter引入，子路由路径可以通过match.path动态拼接父路由路径，后续新增/dashboard下的子路由都可以直接在Dashboard的Switch中添加，不需要修改App层代码：

import React from "react";
import { Route, Switch } from "react-router-dom";
import MenuBar from "../../components/MenuBar";
import Search from '../search';

export default function Dashboard({ match }) {
  return (
      <Positioner>
        <MenuBar />
        <Content>
          <Switch>
            <Route path={`${match.path}/search`} component={Search} />
            {/* 可在此处继续添加其他/dashboard下的子路由 */}
            <Route exact path={match.path}>
              {/* 此处放置Dashboard默认首页内容 */}
            </Route>
          </Switch>
        </Content>
      </Positioner>
  );
}

补充部署配置校验 #

如果修改后本地运行正常、部署到服务器后刷新出现404，需要给服务器配置history路由回退规则：

• Nginx配置：在server块中添加 try_files $uri $uri/ /index.html;
• Apache配置：在.htaccess文件中添加重定向规则
• 本地开发用create-react-app启动默认已经支持该配置，不需要额外修改。

内容的提问来源于stack exchange，提问作者Dann1y