Estoy tratando de averiguar por qué pasar un parámetro usando el enlace y la ruta de React-router-dom no funciona correctamente. Mis rutas están configuradas de esta manera:
Aplicación.tsx
<Routes> <Route path="/:id" element={<Home />} /> <Route path="/search" element={<Search />} /> </Routes>Home procesa los datos usando una identificación inicial predeterminada, y estoy usando el enlace dentro del componente de búsqueda para enviar un parámetro de identificación para procesar los datos en Home usando esta identificación diferente, de esta manera:
Buscar.tsx
<Link to={`../${idParam}`}> <li> Some Link </li> </Link>Lo que espero: cuando la URL apunta a '/', se debe representar el componente de inicio predeterminado. Cuando se agrega un parámetro, Home debe recibir este parámetro y procesarse utilizando la identificación enviada.
Sin embargo, actualmente Home solo se representará cuando se proporcione una identificación como parámetro (por ejemplo: '/1234'). Al navegar a '/' , React responde con 'Ninguna ruta coincide con la ubicación "/" '
Agradezco cualquier ayuda para aclarar qué está mal con mi configuración, ¡gracias!
Ahora la ruta coincide con la ruta exacta de forma predeterminada. Hasta v5 podríamos declarar un parámetro opcional usando un símbolo de interrogación (?). Pero desafortunadamente ya no está disponible en v6. Ref - problemas Ahora, en lugar de un parámetro opcional, puede declarar rutas secundarias bajo una ruta principal. Utilice el siguiente código en App.tsx
<Routes> <Route path="/"> <Route path=":id" element={<Home />} /> <Route path="" element={<Home />} /> </Route> <Route path="/search" element={<Search />} /> </Routes>También cambie su código en Search.tsx a
<Link to={`/${idParam}`}> <li> Some Link </li> </Link>