0
119
VistasRuta de reacción anidada directa a la base
Necesito tener un enlace que me dirija a la ruta anidada base, por ejemplo, tengo la URL "aplicación/panel" dentro de la interfaz de usuario del panel. Quiero tener un enlace que me dirija a la URL anidada base que es "aplicación". /tablero". Cuando uso el "/" en el atributo "a", me dirige a la base raíz que es "aplicación".
Índice.js
<Routes> <Route path="/" element={<App />}> <Route path="register" element={<Register />} /> </Route> <Route path="dashboard" element={<Dashboard />}> <Route index element={<Home />} /> <Route path="upload-reciept" element={<UploadReciept />} /> <Route path="upload-details" element={<UploadDetails />} /> </Route> </Routes>Tablero.js
<ul className="space-y-2"> <li> <NavLink to="/" className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}> <HomeIcon className="h-5 w-5 sm:h-6 sm:w-6"/> <span>Home</span> </NavLink> </li> <li> <NavLink to="upload-reciept" className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}> <CloudUploadIcon className="h-5 w-5 sm:h-6 sm:w-6"/> <span>Upload reciept</span> </NavLink> </li> <li> <NavLink to="upload-details" className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}> <RefreshIcon className="h-5 w-5 sm:h-6 sm:w-6" /> <span>Update details</span> </NavLink> </li> </ul>¿Cómo hago para dirigir el enlace "Inicio" a "aplicación/panel"?
2 Respuestas
Responde la pregunta0
Usa "." como el destino del enlace para apuntar a la ruta actual del "directorio" "/dashboard" . Agregue el complemento end para este enlace para que solo esté activo cuando la ruta termine con la ruta a la que se dirige el enlace, es decir, "/dashboard" .
<NavLink to="." end // <-- to match path "/dashboard" className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700" } > <HomeIcon className="h-5 w-5 sm:h-6 sm:w-6" /> <span>Home</span> </NavLink> 
0
no definió la ruta / aplicación, tiene que hacerlo en el primer paso, puede definir una ruta anidada como esta
<Routes> <Route to="/app" element={<App/>}> <Route to="dashboard" element={<Dashboard/>}> //other <Route/> </Route> </Route> <Routes> o puede usar la forma anterior (antes de v6) e incluso puede definir la ruta como un código duro y definir la Ruta exacta para reaccionar como: <Route to="/where/ever/you/want" {...props} /> por otra cosa, consulte el documento de react-router-dom es muy fácil, ¡buena suerte, amigo!