patternjavascriptreactCritical

Nested routes with react router v4 / v5

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

reactwithrouterroutesnested

Problem

I am currently struggling with nesting routes using react router v4.

The closest example was the route config in the
React-Router v4 Documentation.

I want to split my app in 2 different parts.

A frontend and an admin area.

I was thinking about something like this:

The frontend has a different layout and style than the admin area. So within the frontpage the route home, about and so one should be the child routes.

/home should be rendered into the Frontpage component and /admin/home should be rendered within the Backend component.

I tried some other variations but I always ended in not hitting /home or /admin/home.

Solution

In react-router-v4 you don't nest `. Instead, you put them inside another `.

For instance

should become

with

const Topics = ({ match }) => (
  
    Topics
    
      Example topic
    
    
  
)

Here is a basic example straight from the react-router documentation.

Code Snippets

<Route path='/topics' component={Topics}>
  <Route path='/topics/:topicId' component={Topic} />
</Route>

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

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

Context

Stack Overflow Q#41474134, score: 404

Revisions (0)

No revisions yet.