我正在嘗試<route>在路由器組件中添加一個組件，但沒有奏效。拜托，有人可以幫助我嗎？我的登錄頁面，有一個表單，我只想用路由更改表單。
我正在使用react-router-domv5。
-<Login />
--<LoginForm/>
---<Default/>
---<DadosPessoais/>
路由.js
<Router>
<Route path="/login" exact component={Login}/>
</Router>
登錄.js
<div id="login-main">
<div className="container">
<div className="row" id="login-content" className={ForgotPassWordState ? "forgot" : ""}>
<div>
<LoginForm/>
</div>
<BannerAdvogados />
</div>
</div>
</div>
登錄表單.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>
uj5u.com熱心網友回復：
第一個問題是根路由僅在完全匹配時才呈現"/login"，因此如果 URL/路徑變為"/login/dados"它不再完全匹配并被Login卸載。
移除exact根Route組件上的 prop，以便匹配和渲染子路由/嵌套路由。
登錄.js
<Router>
<Route path="/login" component={Login} />
</Router>
第二個問題，Router 包容性（意味著任何匹配的都被渲染）匹配并渲染路由，這可能是您嘗試exact在所有嵌套路由上使用道具的原因。使用Switch組件排他地（僅呈現第一個匹配項）路由。雖然您可以繼續exact在所有嵌套路由上使用該道具，但將它們呈現Switch為路徑特異性的降序更簡單（即更具體的路徑在不太具體的路徑之前）。
登錄表單.js
<Switch>
<Route path="/login/dados" component={DadosPessoais} />
<Route path="/login" component={Default} />
</Switch>
uj5u.com熱心網友回復：
為什么你使用 react-router-dom v5？
當您使用最新版本時，您必須添加
<BrowserRouter>
圍繞您的完整“應用程式”
初始化你定義...
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
并完成！
問候
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416320.html
標籤：