0
295
VistasCómo crear una nueva página y enrutar programáticamente en React.js con React Router
Estoy construyendo un sitio web de blog con React.js con React-router. Tengo un archivo "blog.js" que muestra todos los títulos de los blogs. La página se ve así:
Blog.js
function Blog() { return ( <div> <Header /> <div className="blog-page-title"> <h1>Blog</h1> </div> <div className="blog"> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> <Articles title="Title" text="lorem ipsum dolor amet" /> </div> <Footer /> </div> ); } export default Blog; 
Cuando hago clic en el título, debería dirigirse al artículo correspondiente. Pero, ¿tengo que crear una nueva ruta y un nuevo archivo js manualmente para cada artículo para lograr esto? Por ejemplo, ¿puedo hacer algo como cuando haya un nuevo componente de artículos en blog.js, irá y creará una nueva ruta y un archivo js automáticamente?
2 Respuestas
Responde la pregunta0
Use una API para devolver la publicación del blog de acuerdo con el blogId seleccionado y luego use el enlace del enrutador de reacción, configure el atributo 'a' del enlace a la página correspondiente que ha creado para los blogs y rellénelo con la respuesta que obtiene de la API . Puede consultar esta documentación para el enrutamiento: https://v5.reactrouter.com/web/api/Link
0
si quieres una nueva página específica para cada artículo, con su propia url, puedes usar los ganchos useParam.
En tu app.js creas una ruta, con un slug, que identifica el artículo de tu blog.
<Route path="/blogs/:blogId component={<Blog />}/>Luego acceda a él usando la etiqueta de enlace como dijo Sharvan en la publicación anterior.
blogs.map( blog => <Link to=`/blogs/${blog.id}` /> )Luego, puede acceder al slug en el componente de su blog, por lo que podrá obtener el artículo correspondiente.
const { blogId } = useParams() axios.get(`whatever/${blogId}`)Si no le importa la URL, puede crear un componente de blog que tome una publicación de blog como accesorios