Estoy tratando de configurar un sitio web donde puede registrar personas y agregará su información a una base de datos. Luego puede buscar los nombres de estas personas en la página principal y filtrará los resultados según el nombre. Cada nombre que aparezca que sea similar a la cadena buscada será un enlace de enlace de reactjs y lo llevará a una página con el nombre de ruta de:
"/student_info_"+elementY en esta página tendrá la información de la persona. Tengo problemas para mostrar la página en App.js, ya que genera una URL parcialmente aleatoria y el código que tengo en mi App.js es:
return ( <div> <Switch> <Route path="/" exact> <MainPage /> </Route> <Route path="/register_student"> <RegisterPage /> </Route> <Route path="/student_info_"> <StudentInfo /> </Route> </Switch> </div> );Esto no parece funcionar por alguna razón. Pruebo esto como en la página de información del estudiante que incluyo:
return ( <div className="btn-textfield"> {pathName} </div> );Y cuando estoy en la página de información del estudiante, no muestra ninguna información. Estoy bastante seguro de que el problema está en App.js al verificar el nombre de ruta de la URL y mostrar la página correcta, pero no estoy seguro de cómo solucionarlo exactamente. Agradezco cualquier respuesta.
Creo que estás buscando parámetros de ruta.
En App.js podrías hacer:
<Route path="/student_info/:id"> <StudentInfo /> </Route> Luego, dentro del componente StudentInfo , podría obtener la parte :id de la ruta actual de esta manera:
import { useParams } from "react-router-dom"; ... const { id } = useParams(); return ( <div className="btn-textfield"> {id} </div> ); Si desea que las rutas se vean exactamente como /student_info_%ID% , también puede lograrlo usando el mismo enfoque y tratando toda esta parte de la ruta como una :id .