He seguido la sugerencia de Pass props en Link react-router
Estoy enviando el valor del Link al componente funcional de ReactJS y mientras accedo a él regresa vacío, estoy seguro de que me falta algo básico aquí.
Esta es mi ruta de ruta
<Route path="/report/:id"> <ReportPage /> </Route>La página del informe que está tratando de obtener valor del parámetro de consulta o del parámetro de estado devuelve vacío
const ReportPage = (props) => { const { query } = useParams(); const { hello } = useState() console.log(query) // Return Empty for Try #2 console.log(hello) // Return Empty for Try #1 console.log(this.props.match.params.hello) // Undefined for return ( <DashboardLayout> <h2> AMI Test Reports </h2> </DashboardLayout> ) }DashbaordPage que está enlazando
Intenté 1 Usando el estado
<Link to={{ pathname: "/report/1", state: { hello: "Hello World" } }}> Press Me </Link>Intenté #2 usando la consulta
<Link to={{ pathname: "/report/1", query: "test" }}> Press Me </Link>Cuál es la forma correcta de acceder al Valor pasado en el Enlace en otro componente funcional.
useParams devuelve un objeto que contiene todos los parámetros disponibles. Lo que tiene actualmente es useParams que devuelve un objeto que contiene una propiedad params que es incorrecta.
Lo que quieras:
const { id } = useParams();En cuanto al estado de la ubicación, lo obtendrías de useLocation, no de useState.
const { state } = useLocation()