Tuve un problema con la redirección a la página a través del enrutamiento de reacción. Quiero que todas mis rutas privadas comiencen con /client/:id y luego agreguen otra parte a esta ruta cuando haga clic en el menú del panel. La ruta final debería ser algo como esto: /client/:id/home .
Entonces, empiezo a codificar y cambio mi objeto manejando todas las rutas como esta:
export const routes = { home: "/client/:id/home" }y el manejo de objetos de componentes como este:
export const routing = [ { path: routes.home, component: Home } ]todo esto lo uso en mi App.tsx como a continuación:
{routing.map(({ path, component }, i) => ( <Route key={i} path={path} component={component} /> ))} Y ahora mismo tengo un problema. Después de redirigir a home usando el historial react-router-dom como se muestra a continuación:
const history = useHistory(); history.push(`/client/${id}/home`)el enrutador me redirige a la página 404 :(
¿Alguien puede decirme qué estoy haciendo mal?
¡Gracias por cualquier ayuda!
Gracias por la pregunta. Para el enrutamiento, el principio básico es el mismo en el caso de React, Angular, Vue. Usando mecanografiado o JavaScript. Al navegar, no necesitamos usarHistorial y empujar el historial en él. Puede usar el enrutamiento anidado aquí y lograr lo mismo. export const route = { home: "/client/:id/home" } Encuentre el ejemplo adjunto.
[https://codepen.io/shwetas7/pen/rNGRNdW][1]Este es un ejemplo con la funcionalidad que necesita. Tienes que usar history.go(); después de history.push para recargar la página.
/* Question: How to properly manage routes with react-router-dom? Url: https://stackoverflow.com/questions/70730898/how-to-properly-manage-routes-with-react-router-dom/70731195#70731195 */ import { Redirect, Route, Router, Switch, useParams } from 'react-router-dom'; import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); function Route2({ history, match }) { // id = 1 // const { id } = match.params; const { id } = useParams(); return ( <> <div>Route 2</div> <button onClick={() => { history.push("/"); history.go(); }}> navigate to Route 1</button> </> ); } function Question4() { return ( <> <Router history={history}> <Switch> <Route path="/client/:id/home" exact render={(props) => <Route2 {...props} />} /> <Route path="/" render={({ history }) => { return ( <> <div>Route 1</div> <button onClick={() => { // history.push("/client/1/home"); // history.go(); window.location.href = '/client/1/home' }}> navigate to Home</button> </> ) }} /> <Redirect path="/" /> </Switch> </Router> </> ); } export default Question4;espero haberte ayudado