In this lecture we cover React Router and how to implement a routing system into our React applications.
Traditionally, when we wanted to create a website that uses multiple pages, we would need to make a request to a server to send back a specific html file to show in the browser. Everytime we would make a request it would cause our web page to reload and this can sometimes be very slow.
A great example of this is the New York Times webpage that can be found here.
In modern day web development, libraries and frameworks such as React only uses a single html file and allow us to create a single page application and prevents us from having to request new html files to display every time we want to route to another page.
So how do we create a single page application that allows us to have multiple pages?
In React, we can use a library called React Router Dom
that will handle what is being displayed to the screen based on the URL.
This will allow us to create a multi page application effect, with the lightning fast speed of a single page application.
The library that we will be using to implement a routing system into our React application is called react-router-dom
. Go ahead and install it into your project by running the terminal command
$ npm install --save react-router-dom
We will be using a specific router from react router called Hash Router
.
Now that we have react-router-dom
installed in our project, let's go ahead and setup the router. In index.js
we will import HashRouter.
Make sure to wrap it in curly braces!
import {HashRouter} from 'react-router-dom';
Now since we have it imported, we want to wrap our entire application in it, so we will wrap the HashRouter
component around our App
component that is being rendered inside of reactDOM.render()
.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// import HashRouter
import {HashRouter} from 'react-router-dom';
ReactDOM.render(
// Wrap App with HashRouter
<HashRouter>
<App />
</HashRouter>,
document.getElementById('root'));
The goal for Hash Router is to keep our user interface in sync with what ther URL is. Meaning, that will display specific components on what the URL in our browser is.
Route is the component we will use from react-router-dom
to determine a specific route for what component will be displayed based on the URL.
We first need to import it into our file to use.
import {Route} from 'react-router-dom';
Make sure to use object destructuring!
We can now use Route
inside of our JSX and give it specific props to determine what component is displayed based off of the URL path.
<Route />
The path
prop will determine what the URL path should be to display the component.
<Route path='/home' />
Above, we have determined that if the URL ends with '/home' then the Home component will be displayed.
Another prop that we can add to our Route is exact
. This prop will tell the route that the URL needs to match up exactly with the path we defined on our Route.
<Route exact path='/home' />
Above, we have declared the URL needs to end exactly with '/home'. If we have anything following or before the '/home' then the component will not be displayed.
This is extremely important to include if we want our base route to be displayed correctly. We can determine what our base route is by creating a route for '/'.
// bad
<Route path='/' />
// good
<Route exact path='/' />
The component
prop is the prop we can add to determine what component is displayed.
<Route component={Home} />
Above we are rendering a the Home component for this route. Make sure to include curly braces and the component name.
Switch is another component that we can use from react router dom library to render only the first route that matches the URL.
If we had multiple routes like so
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/about/contact' component={Contact} />
If we went to '/about/contact' we would still see the component that is being rendered at '/about' because the URL still matches. We could fix this including a bunch of exact
props, or we could use Switch
.
We can use Switch
by wrapping all of our Route
components inside of it. We need to make sure we also import Switch into our file
import {Route, Switch} from 'react-router-dom';
Remember to use the object destructuring!
Now once we have it imported, we can use it
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/about/contact' component={Contact} />
</Switch>
We need to make sure that our Routes are in order inside of our Switch, since it looks for the first route that matches the URL.
We can navigate to different routes inside of our application by using the Link
component that comes from react-router-dom.
We first need to import the Link
into our file
import {Route, Switch, Link} from 'react-router-dom';
Then we will wrap whatever we want to click on to take us to the route.
<Link><p>Home</p></Link>
The Link
component has a required prop called to
. This is how we will tell what route the link should take us to.
<Link to='/'><p>Home</p></Link>
Above we are now telling this Link
tag to take us to the base route, which will render the Home component.
We can set params
inside of our path by prefixing the part of the path with a colon. This will allow us to pass data to our path.
<Route path='/users/:id' component={User} />
Above we are saying that whatever is passed to the '/:id' will be in our URL. We can link to it like so
<Link to='/users/5'><p>User Profile</p></Link>
Above, we are passing the number 5 to the URL. We can access that data that is being sent through the URL from the props.match.params
object.
const {id} = props.match.params;
or if we console logged props
, the object would look like the following