Dynamic Routes with React Router

In web applications, you often need to create dynamic routes that change based on user input or data. React Router provides a flexible way to handle dynamic routes and generate routes dynamically.

One common use case for dynamic routes is when you want to display detailed information about a specific item from a list. For example, if you have an array of articles, each with a unique ID, you can generate routes for each article ID dynamically.

Here's an example of dynamically generating routes based on article IDs:

1// Suppose you have an array of articles with unique IDs
2const articles = [
3  { id: 1, title: 'Article 1', content: 'Lorem ipsum dolor sit amet' },
4  { id: 2, title: 'Article 2', content: 'Consectetur adipiscing elit' },
5  { id: 3, title: 'Article 3', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' }
6];
7
8// Dynamically generating routes based on article IDs
9const App = () => {
10  return (
11    <Router>
12      <div>
13        <h1>My App</h1>
14        <Switch>
15          <Route exact path="/" component={Home} />
16          {articles.map(article => (
17            <Route key={article.id} path={`/articles/${article.id}`}>{() => <Article article={article} />}</Route>
18          ))}
19          <Route component={NotFound} />
20        </Switch>
21      </div>
22    </Router>
23  );
24};
25
26const Home = () => {
27  return <h2>Welcome to My App</h2>;
28};
29
30const Article = ({ article }) => {
31  return (
32    <div>
33      <h2>{article.title}</h2>
34      <p>{article.content}</p>
35    </div>
36  );
37};
38
39const NotFound = () => {
40  return <h2>Page Not Found</h2>;
41};

In this example, we have an array of articles with unique IDs. We use the map function to dynamically generate Route components for each article. The path property of each Route is set to /articles/${article.id}, creating a route for each article ID.

When a user navigates to /articles/1, for example, the Article component is rendered with the corresponding article data. If the user enters an invalid article ID, the NotFound component is displayed.

By utilizing dynamic routes, you can create dynamic and interactive experiences in your React applications. Whether it's displaying detailed information, generating routes based on user input, or handling dynamic data, React Router enables you to handle dynamic routes with ease.

xxxxxxxxxx

};

// replace with TS/JS logic relevant to content

​

// Suppose you have an array of articles with unique IDs

const articles = [

  { id: 1, title: 'Article 1', content: 'Lorem ipsum dolor sit amet' },

  { id: 2, title: 'Article 2', content: 'Consectetur adipiscing elit' },

  { id: 3, title: 'Article 3', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' }

];

​

// Dynamically generating routes based on article IDs

const App = () => {

  return (

    <Router>

      <div>

        <h1>My App</h1>

        <Switch>

          <Route exact path="/" component={Home} />

          {articles.map(article => (

            <Route key={article.id} path={`/articles/${article.id}`}>{() => <Article article={article} />}</Route>

          ))}

          <Route component={NotFound} />

        </Switch>

      </div>

    </Router>

  );

};

​

const Home = () => {

  return <h2>Welcome to My App</h2>;