React Router is a JS library available through NPM that helps mainly with 2 problems:
$ npm install --save react-router
Stop reading if you are not building entire applications using React – you don’t need React-Router for single page applications or small components.
For the rest of us building real web applications, we need to connect several views (React components) into one big application. That process is called "routing."
For example, we need the following application URLs to match the following components:
What pages/views do you want your app to have? You can always start with the basic ones:
The rest of the pages depend on your application and on how you want your users to navigate through your site.
This is the sitemap for any typical e-commerce website:
Once you have finished mapping your application views with URLs, you can start coding everything and that is when React-Router comes in!
The best practice is always creating one component called <Layout />
which will take care of routing the users to the specific views they should see, depending on each of the particular URLs.
This is an example of the same e-commerce sitemap but now using React Router v4:
//this component Layout will take care of routing the URLs with all my application views export const Layout = () => { return ( <div> <BrowserRouter> <div> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/home" component={Home} /> <Route exact path="/log-in" component={Login} /> <Route exact path="/sign-up" component={Signup} /> <Route exact path="/remind" component={Remind} /> <Route exact path="/products" component={Products} /> <Route exact path="/category/:category_id" component={Category} /> <Route exact path="/product/:product_id" component={SingleProduct} /> <Route exact path="/checkout" component={Checkout} /> <Route exact path="/profile/:user_id" component={Profile} /> <Route render={() => <h1>Not found!</h1>} /> </Switch> </div> </BrowserRouter> </div> ); }
There are 3 components to understand here:
<BrowserRouter>
<Switch>
<Route>
that matches the URL will be displayed.<Route>
<Route exact path="/sign-up" component={Signup} />
This route is telling React that when the URL matches "sign-up", the component Signup should be displayed.
<a>
are now a ProblemAnchors take users to other websites or URLs – and that is amazing for simple plain HTML+JS – but, now we DON’T want our users to be taken to other websites or URLs. We want them to remain in the same tab but be able to load the next page without having to refresh. We have two possible approaches of doing that:
<Link>
tag:React Router created a component that we can use instead of <a>
<Link to="/login">Take me to login</Link>
React Router always passes to each view a prop called "history" which contains a lot of useful information to use when routing users. One of its many useful utilities is the "push" function that basically redirects the user to a given path.
<button onClick={() => this.props.history.push("/login")}>Take me to login</button>
Here is a live example using everything that we’ve learned in this reading. Please click and play to understand it, learn it and replicate it: