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

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

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

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

    <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 并且它会工作。

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

谢谢。