React Router开发SPA时路由刷新后单独打开而非同页内嵌如何解决

你当前的路由配置存在重复路径定义+嵌套路由匹配逻辑错误两个问题：

• App.js顶层路由中单独配置了/customers路径的私有路由，直接匹配该路径时会渲染独立的Customers组件，完全跳过包含侧边栏的Dashboard布局容器
• 侧边栏点击跳转时是在Dashboard布局内部触发子路由渲染，没有触发顶层路由重匹配，所以跳转显示正常，但刷新时浏览器会从顶层路由开始解析，直接命中独立的Customers路由

1. 删除App.js顶层路由中独立配置的/customers路由，所有需要内嵌在Dashboard布局中的页面路由统一交由布局组件内部的子路由管理
2. 调整顶层Home路由的匹配规则，去掉exact限制，保证所有需要嵌套布局的路径都会先加载Dashboard布局容器，再匹配内部子路由

App.js #

import { Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import PrivateRoute from "./private/PrivateRoute";

import Landing from "./pages/Landing";
import Home from "./pages/Home";

function App() {
  return (
    <Fragment>
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Landing} />
            {/* 去掉exact，所有需要走Dashboard布局的路径都会先加载Home布局容器 */}
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </BrowserRouter>
      </div>
    </Fragment>
  );
}

export default App;

Routes.js（可保留原有配置，确认Home组件内已将该路由组件放在主内容渲染区域即可） #

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

import Dashboard from "../pages/Dashboard";
import Customers from "../pages/Customers";

const Routes = () => {
  return (
    <Switch>
      <Route path="/home" exact component={Dashboard} />
      <Route path="/customers" exact component={Customers} />
    </Switch>
  );
};

export default Routes;

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