Understand the Difference Between the React Router v4 Router Types

Share this video with your friends

React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.

Timothy

~ 8 years ago

Still not sure I'm ready to jump in to the latest greatest.

Missing for me is a demo of navigating to a page from within javascript code.

Also would like to be able to set my base path in an easy way. Things always go a little haywire moving from localhost to deployed

Joe Maddalone(instructor)

~ 8 years ago

Timothy, I don't cover it here, but you can see how to use base path here in the source code for the lessons. https://github.com/eggheadio-projects/egghead-react-router-v4/blob/master/src/lessons/01-Router/App.js#L13

Navigating to another page should be done with the Redirect component. After all it's just a JSX representation of a javascript function.

Brian

~ 6 years ago

Well done on this no-BS tutorial.

The only issue I have is that it doesn't address integration issues, and update blockers, as described here.

I'm new to React (coming from Angular), and so far everything has been mostly straightforward. I have plenty of experience w/ Redux in Angular, and like many, I'm using it in React now. I'd like to know what your take is on the proposed solutions. Specifically, it seems like v4 doesn't like PureComponent (unless it's the component being rendered by the Route, or connected components (for similar, lifecycle reasons).

The proposed solutions seem to be: Pass Location down to your route-dependent components, assuming you want to be "efficient", or just wrap the dependent (connected) component in withRouter which is described as inefficient. The location passing solution is silly: prop drilling is one of the big issues that Redux solves by making components connected. But withRouter is apparently inefficient.

Could you speak to this? The frustrating part is that I basically just need this b/c NavLink isn't updating the activeClassName prop if I don't address this.

Edit: Let me add one more clarifying detail. What I'd like to accomplish is having all my components be pure or stateless. Anything that needs to update should just get the updates through props, either as a connected component, a render prop, or by passing props from a connected component. This seems like the way to do it, but I'm apparently missing something.