Có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;

ingrese la descripción de la imagen aquí

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?

Answer

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

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

Nuevo colaborador
Sonfaya is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.