Skip to content

Notes for the lecture from React Five talking about implementing a routing system into our application

Notifications You must be signed in to change notification settings

mattcbodily/react-five

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Five

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.

React Router

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

Hash Router

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

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 />

Path

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.

Exact

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='/' />

Component

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

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.

Link

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>

To

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.

Params

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

props object

About

Notes for the lecture from React Five talking about implementing a routing system into our application

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.4%
  • HTML 40.6%