如何使用 React Router v6 在一个父组件上的组件之间切换

Question

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

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

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

AuthPage 应该能够根据路由在登录、注册和密码恢复之间切换。我在我的身份验证页面上尝试了以下代码

    <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>

这在我的根页面上

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

似乎什么都不起作用。对于 v5，我只需使用 switch 就可以了。

有人知道如何解决这个问题吗？

谢谢。

Answer 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>