如何使用REACT路由器V6在一个父组件上的组件之间切换 [英] How do I use react router v6 to switch between components on one parent component

问题描述

我正在构建一个Reaction应用程序，并安装了Reaction-RouterV6。我面临的挑战是在父组件内的组件之间进行切换。我的结构如下。

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

我希望在RootPage中嵌套应用程序的其他各个部分，如Dashboard、UserList等。

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中，我只需使用开关，它就可以工作。

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

谢谢。

推荐答案

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

这篇关于如何使用REACT路由器V6在一个父组件上的组件之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！