O'Reilly logo

React Router Quick Start Guide by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Nested routes and dynamic routing

The earlier versions of React-Router required the routes to be defined upfront, and the child routes to be nested inside another route, as seen here:

<Router>    <Route path='/' component={Container}>        <IndexRoute component={Home} />        <Route path='user' component={User}>            <IndexRoute component={Twitter} />            <Route path='instagram' component={Instagram} />        </Route>    </Route></Router>

This code can be considered static routing, wherein the route configuration is required by the library when the application initializes. Here, the route with the '/' path serves as the parent of all the routes, and the route with the 'user' path is a child route of '/', and a parent route for the route with the 'instagram' path.

In React-Router ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required