How to create a new page and route programatically in React.js with React Router

Question

I'm building a blog website with React.js with React-router. I have a "blog.js" file that renders all titles of the blogs the page looks like this:

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;

When I click on the title, it should route to the corresponding article. But do I have to create a new Route and a new js file manually for each article to achieve this? For instance, can I do something like whenever there is a new Articles component in blog.js it will go and create a new route and a js file automatically?

Assign a unique blog Id for each blog and your route should be like /blog/:blogId and your backend should correctly return the page for that blogId. — kiner_shah
– kiner_shah, Commented Jan 15, 2022 at 9:52

Sonfaya · Accepted Answer · 2022-01-15 10:46:46Z

1

if you want an new specific page for each article, with his own url, you can you the useParam hooks.

In you app.js you create a route, with a slug, that identify your blog article.

<Route path="/blogs/:blogId  component={<Blog />}/>

Then acces to it using the Link tag as said by Sharvan in the above post.

blogs.map( blog => <Link to=`/blogs/${blog.id}` /> )

Then you can acces the slug in your blog component, so you will be able to fetch the corresping article.

const  { blogId } = useParams()
axios.get(`whatever/${blogId}`)

If you don't care of the url, you can just create one blog component that take a blogpost as props

answered Jan 15, 2022 at 10:46

Sonfaya

759 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shravan · Accepted Answer · 2022-01-15 09:57:01Z

0

Use an api to return the blog post according to the selected blogId and then use Link from react router, set the 'to' attribute of Link to the corresponding page you have created for blogs and fill it up with the response you get from the api. You can refer to this documentation for routing: https://v5.reactrouter.com/web/api/Link

answered Jan 15, 2022 at 9:57

Shravan

838 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to create a new page and route programatically in React.js with React Router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related