Changing Old Habits in React Router 4

Rendered routes, a simpler API, and more in version 4 of React Router!

At React Conf 2017, Michael Jackson & Ryan Florence talked about React Router in their talk called “Learn Once, Route Anywhere”. They unveiled the new React Router website, and with it, the new focus that React router has taken — declarative components.

React Router’s new website!

What exactly does this mean for developers using React Router? Well, for starters, you get to write your router code as if they were just normal React components.

If you’ve ever tried to write this in React Router v3, you quickly realized that while you were writing components, that <Route> didn’t really behave like a component:

<Router>
  <IndexRoute component={Home} />
  <div>
   {/* This won't work, Route will complain that it cannot be rendered */}
   <Route path="/about" component={About} />
  </div>
</Router>

So <Route> behaves like a component, so what? Let’s go over all the new stuff in React Router 4 so we can really illustrate why that matters

They Split the Packages Up!

The main React Router package will now be separate packages for the DOM and for Native:

yarn add react-router-dom
# or, if you're not using yarn
npm install react-router-dom

This will let the React Router team create different routers for the web and for React Native without having to bloat the same package. However, both packages provide a similar API, allowing you to take the same routing style that you wrote in one platform to another.

<BrowserRouter> and <NativeRouter>

With the new BrowserRouter and NativeRouter components, you don’t have to worry about setting up your history.

If you’ve worked with React Router 3, you’ve probably written something like this: <Router history={browserHistory}> . Or if you needed to change the basepath of your Router, you had to make your own custom browserHistory object.

With React Router 4, all you have to do is:

import { BrowserRouter } from 'react-router-dom'
<BrowserRouter>
  <App/>
</BrowserRouter>

The <BrowserRouter> component takes a basepath, allowing you to bypass all of that work that you used to have to do.

<Route exact>

Before we get into Route as a renderable component, let’s talk about how they made <Route> more declarative with exact.

The concept of an IndexRoute is gone, and instead you can use exactto match indexes. This syntax also provides a lot more flexibility over IndexRoute; you can now specify that certain routes must match with or without a trailing slash.

import { Route } from 'react-router-dom'
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>

Renderable <Routes>s

Routes are just components in React Router 4! You can have dynamically created routes that only exist for the current rendered component. You can nest Routes in a reusable layout. Or you can just use Routes like you have been!

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
  </div>
</Router>

What’s great about that is that the component that is rendered when you are on the /about path, in the example above, will have its contents rendered inside of the <div> .

Even More Awesome Stuff

There’s tons of great stuff coming out in React Router 4. The above are some of the major changes to how the Router and Route components work today. But there are other changes to that will help developers be more productive:

• Better props from your Route Component
• React Native support
• DeepLinking from React Native apps

Overall, the changes to React Router are a step in the right direction. It utilities the declarative nature of React and makes Routes real components in the sense that they can finally be rendered anywhere in your tree.

If you would like to see a side-by-side example of v3 and v4 of React Router, check out my Github repo: https://github.com/idmontie/react-router-v4-demo

Thanks for reading! If you liked this article, feel free to read more on The Capsule Cat Blog or follow me on Twitter.