Changing Old Habits in React Router 4 – Ivan Montiel – Medium

Changing Old Habits in #ReactJS Router 4:  by @TheCapsuleCat #JavaScript

  • 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/RouterSo Route behaves like a component, so what?
  • 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 NativeRouterWith 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 App//BrowserRouterThe BrowserRouter component takes a basepath, allowing you to bypass all of that work that you used to have to do.Route exactBefore 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 RoutessRoutes are just components in React Router 4!
  • 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:

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…

@HappyFunCorp: Changing Old Habits in #ReactJS Router 4: by @TheCapsuleCat #JavaScript

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.

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.

didn’t really behave like a component:

{/* This won’t work, Route will complain that it cannot be rendered */}

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:

# or, if you’re not using yarn

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.

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

 . 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:

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

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.

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!

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:

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

Changing Old Habits in React Router 4 – Ivan Montiel – Medium