React-router-dom Route不显示预期结果 嵌套子路由跳转失效问题求解

核心问题点 #

• 嵌套了多余的<BrowserRouter>：React Router 全局只需要一个最外层的<BrowserRouter>提供路由上下文，子组件内额外嵌套的<BrowserRouter>会和外层上下文隔离，导致内部导航修改的是内层路由状态，外层路由完全感知不到变化。
• 父级路由加了不必要的exact属性：你在admin.js中给/become-guide的路由加了exact严格匹配，当访问/become-guide/approved这类子路径时，外层路由匹配失败，BecomeGuide组件直接不渲染，内部子路由自然不会生效。
• 路径不匹配：NavGuide里See All按钮的跳转路径是/become-guide/see-all，但对应的Route路径写的是/become-guide/all，两者不一致，就算路由正常也渲染不出对应组件。

修复步骤 #

1. 修改admin.js的路由配置 #

去掉/become-guide路由的exact属性，让子路径可以正常匹配到该路由，渲染BecomeGuide组件：

// Admin组件内的Switch部分修改后如下
<Switch>
    <Route exact path="/dashboard">
        <Dashboard />
    </Route>
    {/* 去掉exact，支持子路径匹配 */}
    <Route path="/become-guide">
        <BecomeGuide />
    </Route>
</Switch>

2. 修改becomeguide.js的代码 #

删掉嵌套的<BrowserRouter>标签，同时修正See All对应的路由路径：

// BecomeGuide组件修改后如下
const BecomeGuide = () =>{
    return (
        <Container>
            <Row>
                <NavGuide />
            </Row>
            <Row>
                {/* 删掉多余的BrowserRouter标签 */}
                <Switch>
                    {/* 修正路径和NavLink的to属性对应 */}
                    <Route exact path="/become-guide/see-all">
                        <GuideSeeAll />
                    </Route>
                    <Route exact path="/become-guide/approved">
                        <GuideApproved />
                    </Route>
                    <Route exact path="/become-guide/pending">
                        <GuidePending />
                    </Route>
                    <Route exact path="/become-guide/rejected">
                        <GuideRejected />
                    </Route>
                </Switch>
            </Row>
        </Container>
    )
}

修改完成后子路由即可正常跳转渲染。

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