How to Create Nested Routes in React Router v4/v5?

Nested Routes with React Router v4/v5

Nested routes allow you to create a hierarchical structure for navigation within your React application. In React Router v4 and v5, you can achieve this by using the and components.

Example

Consider the following example, where we want to divide our application into frontend and admin areas.

<Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />

In the above example, the first definition defines the frontend routes, while the second defines the admin routes. Each route is associated with a component that should be rendered when that route is accessed.

Considerations

In React Router v4, you do not nest components. Instead, you place them within another . For example:

<Route path="/topics" component={Topics} />

Should become:

<Route path="/topics" component={Topics} />

And the Topics component would be defined as follows:

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic} />
  </div>
);

This structure allows for more flexibility and control over your application's routing.

The above is the detailed content of How to Create Nested Routes in React Router v4/v5?. For more information, please follow other related articles on the PHP Chinese website!