React Router

(Psssssssst!!! All the code referenced in this post can be found at https://github.com/NerdcoreSteve/ReactRouter)

Hey all, I'd like to introduce you to a nifty routing library for React called React Router.

It allows you to change what's in your address bar and what's on the screen without actually having to go back to the server. What's good about this is that your user can bookmark certain parts of your app or send links to other users.

We'll be using react-router-dom, the web version of react router. (I honestly, as yet, have no idea what react router for native would be for. :) )

We'll need to make sure our node back-end can take any route, as react router will be handling actual routing on the front-end.

app.get('/*', (req,res) => res.render('index'))  

Now let's write some UI.

Here's what I want to show up when we're at /:

    Typing = () =>
        <div>
            <p>{store.getState()}</p>
            <input
                type="text"
                value={store.getState()}
                onChange={({target:{value: text}}) => 
                    store.dispatch({
                        type: 'ADD_TEXT',
                        text
                    })}/>
        </div>,

Which looks like this:

(BTW, the redux store state is a string initialized to "Blathering Blatherskyte!!" in honor of Ducktales hero Gizmo Duck :) )

This is a simple component that will update the redux store with whatever is typed in the input box and shows that text in a paragraph element.

On the other route I want to show some buttons:

    Buttons = () =>
        <div>
            <p>{store.getState()}</p>
            <button
                onClick={() => store.dispatch({
                    type: 'BUTTON',
                    button: 1
                })}
                type="button">
                    Button 1
            </button>
            <button
                onClick={() => store.dispatch({
                    type: 'BUTTON',
                    button: 2
                })}
                type="button">
                    Button 2
            </button>
            <button
                onClick={() => store.dispatch({
                    type: 'BUTTON',
                    button: 3
                })}
                type="button">
                    Button 3
            </button>
        </div>,

Which looks like:

This component will update the store depending on what button was pressed.

Now it's time to build our Root component using react-router-dom:

    Root = () =>
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">
                            Home
                        </Link>
                    </li>
                    <li>
                        <Link to="/buttons">
                            Buttons
                        </Link>
                    </li>
                </ul>
                <Route
                    exact path="/"
                    component={Typing}/>
                <Route
                    path="/buttons"
                    component={Buttons}/>
            </div>
        </Router>,

I should also mention that Router is actually BrowserRouter from the library. I renamed it like so (using destructuring):

    {BrowserRouter: Router, Route, Link} =
        require('react-router-dom'),

Router, Route, and Link are all components from react-router-dom.

Router is the component that wraps everything else.

Route specifies a route like / or /buttons. It's component prop specifies the component that will show up depending on the address bar's current path. The path prop, of course, specifies the path the component will show up in.

Incidentally, if I hadn't said exact path the Typing component would always show up no matter what was in the address bar. / is a catch all unless we say it's exact.

Link is React Router's way of actually moving us from one path to another. Pretty slick and self explanitory I feel. :)

Ok, we've got all our pieces. Let's put it all together. Here's what render looks like:

    render = () =>
        ReactDOM.render(
            <Provider store={store}>
                <Root/>
            </Provider>,
            document.getElementById('root'))

BTW, Provider is a redux helper from the react-redux library. Any components (or their children) wrapped up in a Provider will have access to the redux store as if it were a global variable. All we have to do is pass it along to Provider as a prop.

If I didn't use Provider I'd have to pass the redux store to every child component as a parameter. A real hassle.

Now we can click on "Home" or "Buttons" to our hearts content:

Pretty slick right?

As you might expect, there's a bunch more to learn. I encourage you to have a look at react-router's docs over at https://reacttraining.com/react-router/web/guides/quick-start.

Looking for a software developer?