Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.2 How It Works: React Router

In this lesson, we’ll explore React Router for a sample app consisting of a dashboard, categories, products, and reviews. I’ll show you how to create the route configuration to navigate between these logical pages.

We’ll take a look at the router API with browserHistory, <Router>, <Route>, and <Link> components. We’ll gradually build up the route configuration, solving the challenges that arise one by one.

Code Snippet

The snippet below shows how the routes are set up for our sample app.


    import {About} from "./components/about";
    import {ReviewList} from "./components/review-list";
    import {Product} from "./components/product";
    import {Category} from "./components/category";
    import {Unknown} from "./components/unknown";
    import {Dashboard} from "./components/dashboard";
    import {browserHistory, Router, Route, IndexRoute} from "react-router";
    import ReactDOM from "react-dom";
    import {Shell} from "./components/shell";

    const root = (
        <Router history={browserHistory}>
            <Route path="/" component={Shell}>
                <IndexRoute component={Dashboard}/>

                <Route path="category/:category" component={Category}>
                    <Route path="product/:product" component={Product}>
                        <Route path="reviews" component={ReviewList}/>
                    </Route>
                </Route>

                <Route path="about" component={About}/>
                <Route path="**" component={Unknown}/>
            </Route>
        </Router>
    );

    ReactDOM.render(root, document.querySelector('main'));

Related Links

1.How It Works: React Router
2 lessons, 15:19

Free Lesson
1.1
Introduction
01:10

1.2
How It Works: React Router
14:09


1.2 How It Works: React Router

Back to the top