如何在 React Router dom 中使用包装器（子路由），其中包含路由列表答案

【问题标题】：How to use wrapper (sub routing) in React Router dom which has a list of routes inside如何在 React Router dom 中使用包装器（子路由），其中包含路由列表
【发布时间】：2022-01-24 10:13:36
【问题描述】：

我对 react-router-dom 中的子路由有一个小问题

就我而言，我有 3 种不同的容器，分别是 MainContainer.jsx、LoginContainer.jsx 和 RegisterContainer.jsx

所有这些容器内部都存在子路由

目前，在我的 App.js 文件中只有 3 条路线

当我尝试访问 LoginContainer.jsx 中的路由时，如果我在父路由上没有确切的标志，则登录路由不会呈现

另一方面，当我尝试访问注册路由时，如果登录父路由有一个确切的标志，我也会遇到同样的错误

我试图在 App.js 中的所有父路由上切换精确和严格的标志

但这并没有解决我的问题

这是我的组件

我的 App.js 文件

<Switch>
                <Route exact path='/' component={MainContainer}/>
                <Route path='/login' component={LoginContainer}/>
                <Route path='/login/:type/register' component={RegisterContainer}/>
            </Switch>

我的登录容器

<Router history={history}>
            <div className="login">
                <LoginHeaderNavigation/>
                <div className="login-page-wrapper">
                    <Suspense fallback={<></>}>
                        <Switch>
                            <Route exact path={match.url} component={Login}/>
                            <Route exact path={`${match.url}/:type`} component={LoginType}/>
                        </Switch>
                    </Suspense>
                    <LoginFooter/>
                </div>
            </div>
        </Router>

我的注册容器

<Router history={history}>
            <div className='register-page'>
                <RegisterHeaderNavigation/>
                <Suspense fallback={<></>}>
                    <Switch>
                        <Route exact path='/login/:type/register' component={Register}/>
                    </Switch>
                </Suspense>
            </div>
        </Router>

最后一个 MainContainer

<Suspense fallback={<></>}>
                <Switch>
                    <Route exact path='/' component={Explore}/>
                    <Route path='/adventure-blog/:slug/:id' component={Blog}/>
                </Switch>
            </Suspense>

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

Switch 组件呈现第一个与位置匹配的子<Route> 或<Redirect>。这意味着路径顺序和特异性很重要！！您应该对Switch 组件中的路由进行排序，从 more 到 less 特定。如果操作正确，则几乎不需要 exact 属性。

此外，如果任何路由组件正在渲染嵌套路由，则恰好匹配路径前缀必然会排除子路由的匹配。换句话说，如果完全匹配 "/login" 以呈现 LoginContainer，然后您尝试导航到 "/login/sometype"，则路径不再完全匹配并且 LoginContainer 被卸载。

应用程序

<Switch>
  <Route path='/login/:type/register' component={RegisterContainer} />
  <Route path='/login' component={LoginContainer} />
  <Route path='/' component={MainContainer} />
</Switch>

您实际上只需要一个包装应用程序的路由器即可为所有路由组件提供路由上下文。我建议删除其他容器中的嵌套路由器。嵌套路由应使用来自match 对象的path 值，url 用于构建任何嵌套链接。

登录容器

<div className="login">
  <LoginHeaderNavigation />
  <div className="login-page-wrapper">
    <Suspense fallback={<></>}>
      <Switch>
        <Route path={`${match.path}/:type`} component={LoginType} />
        <Route path={match.path} component={Login} />
      </Switch>
    </Suspense>
    <LoginFooter />
  </div>
</div>

注册容器

<div className='register-page'>
  <RegisterHeaderNavigation />
  <Suspense fallback={<></>}>
    <Switch>
      <Route path={match.path} component={Register} />
    </Switch>
  </Suspense>
</div>

主容器

<Suspense fallback={<></>}>
  <Switch>
    <Route path="/adventure-blog/:slug/:id" component={Blog} />
    <Route path="/" component={Explore} />
  </Switch>
</Suspense>

【讨论】：