如何使用 react router v6 在一个父组件上的组件之间切换答案

【问题标题】：How do I use react router v6 to switch between components on one parent component如何使用 react router v6 在一个父组件上的组件之间切换
【发布时间】：2021-12-28 21:58:24
【问题描述】：

我正在构建一个 react 应用程序并安装了 react-router v6。我的挑战是在父组件中的组件之间切换。我的结构如下。

App.js -> Rootpage.js -> AuthPage.js -> (Register.js | SignIn.js | PasswordRecover.js)

RootPage 是我想要嵌套应用程序其他各个部分的位置，例如仪表板、用户列表等。

AuthPage 应该能够根据路由在 SignIn、Register 和 PasswordRecover 之间切换。我在我的身份验证页面上尝试了以下代码

    <div className="auth">
        <div className="auth-left">
            <Routes>
                <Route path='/signin' element = { <SignIn /> } />
                <Route path='/signup' element = { <SignUp /> } />
                <Route path='/recovery' element = { <PasswordRecovery /> } />
            </Routes>
        </div>
        <div className="auth-right">
            <img src="./assets/image.png" alt="" />
        </div>
    </div>

这在我的 RootPage 上

    <div className='root-page'>
        <Routes>
            <Route path='/' element = { <Auth /> } />
        </Routes>
    </div>

似乎没有任何效果。在 v5 中，我只需使用 switch 即可。

有人知道怎么解决吗？

谢谢。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

在 RRDv6 中，路由路径匹配现在总是完全匹配。如果Auth 组件正在渲染子路由，那么它应该指定一个通配符* 路径后缀。

当有另一个 <Routes> 时，您只需要尾随 * 在那条路线的后代树的某个地方。在这种情况下，后代<Routes> 将匹配路径名的部分仍然存在。

<div className='root-page'>
  <Routes>
    <Route path='/*' element={<Auth />} />
  </Routes>
</div>

...

<Routes>
  <Route path='signin' element={<SignIn />} />
  <Route path='signup' element={<SignUp />} />
  <Route path='recovery' element={<PasswordRecovery />} />
</Routes>

【讨论】：