0
99
VisualizaçõesRuta genérica pero el mismo componente.
Intentando crear un procesador de archivos, pero no sé cómo crearlo correctamente. El fragmento que tengo es ese pero es súper repetitivo:
<Routes> <Route path='/explorer' element={<Files>}> <Route path=':root' element={<Files>}> <Route path=':branch' element={<Files>}> <Route path=':leaf' element={<Files>} /> ... </Route> </Route> </Route> </Routes>Ejemplos:
- /explorador/casa
- /explorador/inicio/nombre de usuario
- /explorador/inicio/nombre de usuario/documentos
- ...
Si uso el gancho useParams de react-router-dom a veces algunos parámetros no estarían definidos y me gustaría ignorar estos parámetros (bucleando todos los parámetros podría hacerlo pero no creo que sea la mejor práctica) Con esos parámetros después de crear un array y haga una solicitud para mostrar todos los archivos o las carpetas de la ruta seleccionada ( /explorer/home/username )
¿Es alguna forma de establecer una cantidad genérica de parámetros para un solo componente y obtener un objeto de params con solo los parámetros necesarios?
<Routes> <Route path='/explorer' element={<Files>}> <Route path='??' element={<Files>}> </Route> <Routes>1 Respostas
Responde à pergunta0
Solo una sugerencia que tengo para una forma simple de administrar esto sería representar una ruta única sin parámetros de ruta y un carácter comodín final "*" para continuar haciendo coincidir después del primer segmento de ruta.
Ejemplo:
<Routes> <Route path="/explorer/*" element={<Files />} /> </Routes> El componente Files luego accederá a la location.pathname completa. nombre de ruta y aplicará una pequeña manipulación de cadenas para obtener la estructura de archivo/directorio de los segmentos de ruta de URL.
Ejemplo:
const Files = () => { const { pathname } = useLocation(); const path = pathname .slice(1) // remove leading "/" .split("/") // split path directories .slice(1); // remove leading "explorer" route path return ( ... ); };| nombre de ruta | matriz de ruta |
|---|---|
/explorer/home | ["home"] |
/explorer/home/username | ["home", "username"] |
/explorer/home/username/documents | ["home", "username", "documents"] |
/explorer/home/username/documents/math/exercises | ["home", "username", "documents", "math", "exercises"] |
Lo que haga con path desde aquí depende de usted.
La otra solución que propuse fue pasar la ruta como un parámetro de consulta, es decir, "/explorer?path=/home , y aplicar un procesamiento de cadena de ruta similar. Tal vez algo como lo siguiente:
const [searchParams] = useSearchParams(); const stringPath = searchParams.get('path'); const path = stringPath .slice(1) // remove leading "/" .split("/"); // split path directories