Estoy diseñando un tablero de usuarios en React, donde el usuario inicia sesión y navega a su tablero con otros enlaces como Archivado, Perfil y Configuración. Mi inicio de sesión y luego Navegar a la página de inicio funciona bien. He diseñado los enlaces de la página Panel, Archivado, Perfil y Configuración en la barra lateral. Ahora, cuando navego a Links. Me lleva a una nueva ruta URL y mi barra lateral desaparece. Quiero que mi barra lateral siga apareciendo en todas las páginas mientras esté conectado.
A continuación se muestra mi App.js donde he diseñado la ruta de nivel superior:
return ( <div> <Router history={history}> <Switch> <PrivateRoute exact path="/" component={HomePage} /> <Route path="/login" component={LoginPage} /> <Route path="/register" component={RegisterPage} /> <Redirect from="*" to="/" /> </Switch> </Router> </div> );Una vez que el usuario está en la página de inicio, necesito que se muestre el tablero y otros enlaces. y cuando el usuario hace clic en cualquier enlace de la barra lateral, la barra lateral aún debe estar allí mientras se abre la otra página. Así que agregué las rutas internas a HomePage.jsx así:
return ( <div> <Router history={history}> <Sidebar /> <Switch> <Route path="/" component={Dashboard} /> <Route path="/archived" component={ArchivedPage} /> <Route path="/profile" component={ProfilePage} /> <Route path="/settings" component={SettingsPage} /> {/* <Redirect from="*" to="/" /> */} </Switch> </Router> </div> );Pero no funciona. ¿Alguien puede ayudarme a entender si esto es correcto? o cómo puedo lograr el resultado requerido. Por favor, hágamelo saber si necesita cualquier otro detalle.
Gracias.
El problema es que está haciendo coincidir exactamente "/" para representar HomePage , pero tan pronto como la ruta es más profunda, como "/archived" , ya no coincide exactamente y HomePage se desmonta.
No debe representar un Router dentro de otro Router , solo necesita un enrutador por aplicación para proporcionar el contexto de enrutamiento.
Retire el enrutador interno ( ¡y cualquier otro enrutador anidado! ). Elimine la propiedad exact en la ruta "/" y reordene las rutas para especificar las rutas más específicas antes que las rutas menos específicas para que Switch pueda hacer su trabajo y hacer coincidir y representar la ruta adecuada.
aplicación
Reordene las rutas "/login" y "/register" más específicas para que coincidan antes de la ruta "/" menos específica. Si tuviera, por ejemplo, una ruta "/login/google" , esta es más específica que "/login" y se pediría antes.
return ( <div> <Router history={history}> <Switch> <Route path="/login" component={LoginPage} /> <Route path="/register" component={RegisterPage} /> <PrivateRoute path="/" component={HomePage} /> <Redirect to="/" /> </Switch> </Router> </div> );Página principal
Mueva el Dashboard a la última posición de la ruta, de modo que si ninguna otra ruta anterior coincida y se devuelva, el tablero coincida y se represente.
return ( <div> <Sidebar /> <Switch> <Route path="/archived" component={ArchivedPage} /> <Route path="/profile" component={ProfilePage} /> <Route path="/settings" component={SettingsPage} /> <Route component={Dashboard} /> </Switch> </div> );en primer lugar, está haciendo algo mal, no puede poner un enrutador dentro de un enrutador, tiene un enrutador en la aplicación, luego dentro de un componente que está dentro de la aplicación tiene otro enrutador, eso es un problema, no sé si eso resuelve su problema, pero inténtelo solo eliminar enrutador en la página de inicio