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 exact to 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