Learning Redux

Dynamic routing

In contrast to the static declaration of routes, react-router uses a more dynamic approach, where you can use <Route> components anywhere in your app.

For example, we could make a simple page with a navigation bar and the main container that changes depending on the route/path:

const App = () =>  <Router>

With the <Link> component, we can define links to certain paths/routes. In this example, we are going to define links to the main page and a posts page:

    <nav>      <Link to="/">Main</Link>      <Link to="/posts">Posts</Link>    </nav>

Then, we can use the <Route> component to display certain other components (our page components) when the path matches a certain route:

    <div>      <Route path="/" component={MainPage} /> <Route path="/posts" ...