Estoy tratando de agregar <route> en un componente dentro de un componente de enrutadores, pero no funcionó. Por favor, ¿alguien me puede ayudar? Mi página de inicio de sesión tiene un formulario y solo quiero cambiar el formulario con rutas.
Estoy usando react-router-dom v5.
-<Login /> --<LoginForm/> ---<Default/> ---<DadosPessoais/>Rutas.js
<Router> <Route path="/login" exact component={Login}/> </Router>Iniciar sesión.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>El primer problema es que la ruta raíz solo se representa cuando coincide exactamente con "/login" , por lo que si la URL/ruta se convierte en "/login/dados" , ya no coincide exactamente y el inicio de Login se desmonta.
Elimine el accesorio exact en el componente Route raíz para que las subrutas/rutas anidadas puedan coincidir y renderizarse.
Iniciar sesión.js
<Router> <Route path="/login" component={Login} /> </Router> Segundo problema, el Router inclusive ( significa que todo lo que coincide se representa ) coincide y representa rutas, es probable que esta sea la razón por la que está tratando de usar el accesorio exact en todas las rutas anidadas. Use un componente Switch para una ruta exclusivamente ( solo se representa la primera coincidencia ). Si bien podría continuar usando el accesorio exact en todas las rutas anidadas, es más sencillo representarlas en un Switch en orden descendente de especificidad de ruta ( es decir, rutas más específicas antes de rutas menos específicas ).
LoginForm.js
<Switch> <Route path="/login/dados" component={DadosPessoais} /> <Route path="/login" component={Default} /> </Switch>¿Por qué usas react-router-dom v5?
Cuando usa la versión más nueva, debe agregar
<BrowserRouter>Alrededor de su "App" completa
En su interior se define
<Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes>