React落地页嵌套路由配置：访问/user路径自动跳转错误页如何解决

问题原因 #

跳转/user直接命中Error页的问题，是三个常见的嵌套路由配置错误导致的：

1. 重复注册Router实例：App.js已经通过顶层管控全局路由，Panel组件内额外嵌套的会切断路由上下文的连通性，外层路由无法识别内层定义的/user路径，直接匹配到最后的Error路由。
2. 父路由匹配规则限制：如果App.js中对应Panel的私有路由加了exact完全匹配限制，那么只有路径完全等于paths.dashboard时才会渲染Panel，后缀带其他路径的地址不会进入Panel组件，自然也匹配不到内部的/user路由。
3. 路径规则不匹配：如果paths.user没有以paths.dashboard为前缀，访问/user时外层路由不会触发Panel组件的渲染，内部路由自然不会生效。

修复步骤 #

1. 删除Panel组件内的嵌套Router #

全局仅保留App.js中的顶层Router即可，修改Panel组件代码：

import React, { useContext }  from 'react';
import PropTypes from 'prop-types';
// 去掉导入的BrowserRouter，只保留Route、Switch
import { Route, Switch } from 'react-router-dom';
import Header from '../../Components/Header/Header';
import { UserContext } from '../../Utils/UserContext';
import {paths} from '../../Constants/Paths';
import User from '../User/User';

const Panel =(props)=>{
  const {history}=props;
  const { user } = useContext(UserContext);
  console.log(props);
  return (
    <div>
      <Header />
      Home Page
      {/* 删掉外层<Router>标签，只保留Switch和Route */}
      <Switch>
        <Route exact path={paths.user}>
          <User user={user} history={history} />
        </Route>
      </Switch>
    </div>
  );
};
export default Panel;

Panel.propTypes = {
  isAuthenticated: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool]),
  history:PropTypes.object.isRequired,
};

2. 调整路由路径与匹配规则 #

二选一即可：

方案A：使用嵌套路由前缀（推荐）

调整路径配置，让子路由继承父路由前缀，比如：

• paths.dashboard = '/dashboard'
• paths.user = '/dashboard/user'
  同时确认App.js中对应Panel的PrivateRouting没有加exact属性，这样访问/dashboard/user时会先匹配父路由渲染Panel，再匹配Panel内部的子路由渲染User组件。

方案B：顶层直接声明user路由

如果需要/user直接作为根路径下的独立路由，直接在App.js的Switch中Error路由之前新增私有路由即可，不需要在Panel内配置路由：

function App() {
  const [user, setUser] = useState(null);
  let history = useHistory();
  return (
    <Router>
      <UserContext.Provider value={{ user, setUser }}>
        <Switch>
          <Route exact path={paths.login}>
            <LoginWrapper history={history} />
          </Route>
          <Route exact path={paths.signup}>
            <SignupWrapper history={history} />
          </Route>
          <PrivateRouting path={paths.dashboard}
            isAuthenticated={user}
            history={history}
            component={Panel} />
          {/* 新增user路由 */}
          <PrivateRouting path={paths.user}
            isAuthenticated={user}
            history={history}
            component={User} />
          <Route component={ErrorPage} />
        </Switch>
      </UserContext.Provider>
    </Router>
  );
}

3. 校验路径配置 #

检查/Constants/Paths.js中所有路径的拼写，确保和预期访问地址一致。

注：以上修复方案适配你当前使用的react-router-dom v5版本，若升级到v6版本需对应调整API写法。

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