在组件 React 中添加子路由

Question

我试图在路由器组件内的组件中添加 <route>，但没有成功。拜托，有人可以帮助我吗？我的登录页面有一个表单，我只想用路由更改表单。

我正在使用 react-router-dom v5.

-<Login />
--<LoginForm/>
---<Default/>
---<DadosPessoais/>

Routes.js

 <Router>  
 <Route path="/login" exact component={Login}/>
</Router>

Login.js

 <div id="login-main">
            <div className="container">
                <div className="row" id="login-content" className={ForgotPassWordState ? "forgot" : ""}>
                    <div>
                        <LoginForm/>
                    </div>
                    <BannerAdvogados />
                </div>

            </div>
        </div>

LoginForm.js

<div id="login-form">
            <div id="login-logo">
                <img src={logo} alt="Page logo"/>
            </div>
         
                    <div className="title-form">
                        <h2>Bem-vindo de volta a Page!</h2>
                        <p>Preencha os campos abaixo e acesse sua conta</p>  
                    </div>
                    
                        <Route path="/login" exact component={Default} />
                        <Route path="/login/dados" exact component={DadosPessoais} />  
                </>

            }
        </div>

Answer 1

第一个问题是根路由只有在完全匹配 "/login" 时才会呈现，所以如果 URL/path 变为 "/login/dados" 它不再完全匹配并且 Login 被卸载。

删除根 Route 组件上的 exact 属性，以便可以匹配和呈现 subroutes/nested 路由。

Login.js

<Router>  
  <Route path="/login" component={Login} />
</Router>

第二期，Router包括（表示匹配的都渲染) 匹配并呈现路由，这可能就是您尝试在所有嵌套路由上使用 exact 属性的原因。使用 Switch 组件独占（ 仅 第一个 匹配呈现) 一条路线。虽然你可以继续在所有嵌套路由上使用 exact 道具，但更简单的是将它们呈现为 Switch 按路径特异性的降序排列（即更具体的路径在不太具体的路径之前).

LoginForm.js

<Switch>
  <Route path="/login/dados" component={DadosPessoais} /> 
  <Route path="/login" component={Default} />
</Switch>

Answer 2

为什么使用 react-router-dom v5？

当您使用最新版本时，您必须添加

<BrowserRouter>

围绕您完整的“应用程序”

里面你定义

<Routes>
   <Route path="/" element={<Home />} />
   <Route path="/about" element={<About />} />
</Routes>

在组件 React 中添加子路由

Add children Route's in a component React

javascript

reactjs

react-router

react-router-dom