Home > Article > Web Front-end > How to Create Nested Routes in 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
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
In React Router v4, you do not nest
<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!