React Router Dom v5 子路由内重定向App.js顶层路由失效如何解决

• 你的应用存在多Router实例冲突：react-router v5要求全局仅保留1个顶层<BrowserRouter>实例，你在AuthContainer、PublicContainer组件中额外嵌套了独立的<Router>，每个Router维护独立的路由上下文，内部的重定向、路由变化不会同步到顶层Router，因此出现地址更新但页面不渲染的问题。
• 额外冗余问题：App.js中<Route path="/*" component={PublicContainer} />会拦截所有路由，导致后续定义的NotFound路由永远无法触发。

步骤1：删除子组件中的多余Router实例 #

修改后AuthContainer代码 #

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

// PAGES
import Signin from "../Auth/Signin";
import Signup from "../Auth/Signup";

const AuthContainer = () => {
  console.log("AUTH")
  return (
    <div>
      <Switch>
        <Route exact path="/auth" component={Signin}/>
        <Route exact path="/auth/signin" component={Signin}/>
        <Route exact path="/auth/signup" component={Signup}/>
      </Switch>
    </div>
  );
};

export default withRouter(AuthContainer);

修改后PublicContainer代码 #

/* Dependencies */
import { Route, Switch } from 'react-router-dom'

/* Components */
import Header from "../../Components/Header"
import Products from "./Products"
import Home from "./Home"
import UserProfile from "../User/AccountProfile"
import MyCart from '../Public/MyCart'
import NotFound from '../NotFound' // 引入404组件

const PublicContainer = () => {
    console.log("PUBLIC")
    return (
        <div>
            <Header />
            <Switch>
                <Route exact path='/' render={(props) => <Home />} />
                <Route exact path='/products' render={(props) => <Products />} />
                <Route exact path='/mycart' render={(props) => <MyCart isAuth={false} />} />
                <Route path="*" component={NotFound} /> {/* 404移到此处 */}
            </Switch>
        </div>
    )
}

export default PublicContainer

步骤2：简化App.js路由配置 #

删除冗余的NotFound路由，调整后的App.js代码：

import { Suspense } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

/* Pges */
import AdminContainer from './Pages/Admin/AdminContainer';
import PublicContainer from './Pages/Public/PublicContainer';
import AuthContainer from './Pages/Auth/AuthContainer';

function App() {
  console.log("APP")
  return (
    <Suspense fallback={<p>Loading</p>}>
      <Router>
        <Switch>
          <Route path="/auth" component={AuthContainer} />
          <Route path="/admin" component={AdminContainer} />
          <Route path="/" component={PublicContainer} />
        </Switch>
      </Router>
    </Suspense>
    )
  }
export default App;

步骤3（可选）：简化MyCart重定向逻辑 #

import React from 'react'
import { Redirect } from 'react-router'

const MyCart = ({isAuth}) => {
    if(!isAuth)
        return <Redirect to='/auth/signin' />
    return (
        <div>
            my cart
        </div>
    )
}

export default MyCart

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