0

Estoy tratando de recoger el pathname de mi url y no encuentro la manera. Intento recoger los parametros de la ruta dinamica de id y me encuentro con multiples errores. Alguien puede echarme una mano, por favor. Gracias

import React from 'react';
import { BrowserRouter, Route, Routes} from 'react-router-dom';
import Peliculas from '../Peliculas/Peliculas';
import Error from '../Error/Error';

const Router = () => {
      
      return (

        <BrowserRouter>
          <Routes>
            <Route exact path='/' element = {<Peliculas/>}/>   
            <Route path='*' element = {<Error/>}/>
            <Route exact path='/:id' element= { (props) => {
                const id = props.match.params.id;
                <div id='content'>
                  <h1 className='subheader'>Hola amigo</h1>
                  <h2>{id}</h2>
                </div>              
            }       
            }/>
          </Routes>
        </BrowserRouter>
    )
}

export default Router;

1 respuesta 1

1

De la forma en que lo hago yo es usando useParams de React route.

de la siguiente forma:

//En la vista usando Link de react route enviamos el id
import {Link}  from "react-router-dom"
.....
<Link to={`../Aviso/idAviso=${a.id}`} className="btn btn-primary">Más informacion</Link>

En el enrutador:

<Routes>
//Retornamos eel componente aviso
<Route path="/Aviso/idAviso=:id" element={<Aviso/>} />
</Routes>

Y en el componente:

export default function Aviso(){
    const {id} = useParams()
    console.log(id)
}

De esta forma puedes obtener el id con react route, sin embargo veo que lo quieres obtener dentro del mismo "enrutador", por lo tanto talvez te sirva el ejemplo que muestra React Route dentro de su documentacion:

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

En este enlace puedes obtener mas informacion, es la documentacion oficila de React Route.

2
  • Hola David, gracias por responder. Si que me gustaria hacerlo dentro del enroutador, ya utilice el useParams, pero tampoco consegui de ninguna manera pintar el {id}. Tambien utilicé el código que ofrece la documentación oficial y no me funcionaba. La verdad es que probe muchas cosas y no logré encontrar donde esta el error.
    – jbort
    Commented el 13 sept. 2022 a las 7:29
  • David081, fijate por qué se rechazó tu edición a la pregunta.
    – padaleiana
    Commented el 13 sept. 2022 a las 13:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.