Not long after I started working at my current position, the team realized that it would be necessary for us to upgrade to React 16 so we could use a new UI library we were keen on adopting.

To figure out how much time this upgrade would require, we looked at all of our current packages to see if they were compatible with React 16, and to see if we were still using unsupported or deprecated packages.

The beginnings of our code base had been built by developers who used whatever open source or third party library they wanted, without actually vetting them. Thus, we found that a lot of the packages were deprecated and needed to be replaced ASAP.

One of the biggest surprises for us was the deprecation of react-router-redux. We were using react-router-redux in conjunction with react-router v3. This led us to think critically about why we were using redux in our router in the first place.

Once we started to look into react router v4, we realized that the new features would pretty much eliminate any reason for us to use an additional library to connect our router and redux. So, that left us in the position to just upgrade from react router 3 to 4, and remove react-router-redux from our application.

So, I was tasked with upgrading our router to v4 after only being in the position and working with React for about 2 months. This was because upgrading from React Router 3 to React Router 4 sounded like it should be a trivial undertaking. But, as I quickly found out, it was a little bit more involved than I anticipated.

Looking through the documentation, the GitHub repo, and many, many Stack Overflow answers, I finally pieced together the steps for the upgrade and wanted to share my findings — especially to explain how and why certain changes are made.

The biggest change to note, from the creators of React Router, is that the upgrade from React Router 3 to React Router 4 is more than just updating a few libraries and features — it allows you to fundamentally change how your Router works. The creators of React Router wanted to go back to a simple Router, allowing the developer to customize it however they would like.

I’ve split up this guide into 5 different parts:

1. Package
2. History
3. Route
4. Props
5. Redux Integration

Package

React Router v4 package structure changed such that it’s no longer necessary to install react-router — you have to install react-router-dom (and uninstall react-router), but you don’t lose anything since it re-exports all of react-router’s exports. This means you also have to update any react-router import statements to react-router-dom.

History

History is an essential part of routing, allowing us to remember where we came from and where we are currently. History comes in many forms for react-router, and could take a while to explain. So, to keep this article on topic, I’ll simply recommend that you read through this article that explains history in relation to react router 4. This article should cover most cases of your usage of history.

Route

React Router v3 allowed us to place all of our application routes in one file, which we’ll call router.js. However, React Router v4 allows you to place Routes in the components that they’re rendering. The idea here is to dynamically route the application — in other words, the routing takes place as the app is rendering.

However, if you have a decent-size legacy code base you’re working with, you probably won’t be making a change that big. Luckily, React Router v4 still allows you to place all the routes in a central file, which is how I’ll create all of our examples. There are, however, a few older components and features that will need replacing.

IndexRoute

Previously, IndexRoute was used as a route for some default UI of a parent Route. But, in v4, IndexRoute is no longer used, since this functionality is now available in Route.

For providing default UI, multiple Routes that have the same path will let all of the associated components render:

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
    // example of our route components
    <Route path="/" component={Home} />
    <Route path="/" component={About} />
    <Route path="/" component={Contact} />
</Router>

So, all of the Components — Home, About, and Contact — will render. Because of this, you can no longer nest Routes, either.

Additionally, to allow for better matching without the use of IndexRoute, you can use the exact keyword.

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
    // example of our route components
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
</Router>

Exclusive Routing

After adding in the exact keyword, “something.com/about” will be routed to when the router sees a path “/about”. But now what if you have another path, “/about/team”? As I stated before, the router will render anything that matches. So, the components associated with both “/about” and “/about/team” will render. If that’s what you intended, then that’s great! However, if this isn’t what you want, you may have to put a Switch around this group of Routes. This will allow the first path that matches the URL to render.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

<Router>
    <Switch>
       <Route exact path ="/" component={Home} />
       <Route path="/about/team" component={Team} />
       <Route path="/about" component={About} />
    </Switch>
</Router>

Note that the keyword exact still has to appear for the Home component — otherwise it would match for the subsequent routes. Also note that we have to list “/about/team” before “/about” so the route goes to the Team component instead of the About component when it sees “something.com/about/team”. If it saw “/about” first, it would stop there and render the About component because Switch only renders the first component that matches.

Default Route

A default route, or a “catch all” route, commonly used for 404 pages, is the route you use when none of the routes match.

In React Router v3, a default Route was:

<Route path=”*” component={NotFound} />

In React Router v4, the default Route was changed to:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

<Router>
    <Switch>
       <Route exact path ="/" component={Home} />
       <Route path="/about/team" component={Team} />
       <Route path="/about" component={About} />
       <Route component={NotFound} /> // this is our default route
    </Switch>
</Router>

When you don’t include a path in a Route, the component will always render. So, as we discussed above, we can use Switch to get only one component to render, and then place the “catch all” route very last (so it doesn’t use that one before the Router gets a chance to check the rest of the paths), so something will always render even if the other paths don’t match.

onEnter

Previously, you could use onEnter to make sure the component of the Route has all of the information it needs or as a check (such as to make sure the user is authenticated) before the component rendered.

This feature has been deprecated because the new structure of Routes is that they should act like components, so you should take advantage of component lifecycle methods instead.

In React Router v3:

<Route path=”/about” onEnter={fetchedInfo} component={Team}/>

Becomes:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

<Router>
    <Switch>
       <Route exact path ="/" component={Home} />
       <Route path="/about/team" component={Team} />
       <Route path="/about" component={About} />
       <Route component={NotFound} />
    </Switch>
</Router>

...

componentDidMount() {
    this.props.fetchInfo();
}

...

Props

In React Router v4, the props passed through the router have changed, as did the way they are accessed. The Route now passes three props:

• history
• location
• match

history

history contains a lot of other properties and methods, so I won’t list all of them, but here is a selection that might be most commonly used:

• length: number of entries in the history stack
• location: contains the same information as below
• push(path, [state]): pushes new entry on history stack
• goBack(): allows you to move the pointer on the history stack back 1 entry

It’s important to note that history is mutable, and while it contains a location property, this instance of location shouldn’t be used since it could have been changed. Instead, you want to use the actual location prop discussed below.

location

The location has properties:

• pathname
• search
• hash
• state

location.search is used to replace location.query and it must be parsed. I used URLSearchParams to parse it. So a URL such as “https://something.com/about?string=’hello’” would be parsed as such:

...

const query = new URLSearchParams(this.props.location.search)
const string = query.get('string') // string = 'hello'

...

Additionally, the state property can be used to pass the location-specific state of components through props. So, if you wanted to pass some information from one component to another, you could use it like this:

...
// To link to another component, we could do this:
<Link to='/path/' />

// However, if we wanted to add state to the location, we could do this:
const location = {
    pathname: '/path/',
    state: { fromDashboard: true },
}
<Link to={location} />
...

So, once we get to the component rendered by that path, we’ll have access to fromDashboard from location.state.fromDashboard.

match

match has the following properties:

• params: gets the dynamic segments of the path from the URL — for example if the path is “/about/:id”, in the component, accessing this.props.match.params will give you the id in the URL
• isExact: true if the entire URL was matched
• path: the path in the routes that was matched
• url: the matched portion of the URL

Redux Integration

As I addressed earlier, we found that in our case, we didn’t need to have an additional library to connect redux with our router, especially since our main use case for this — Blocked Updates — was covered by react router.

Blocked Updates

In some cases, the app doesn’t update when the location changes. This is called a “Blocked Update”. This can happen if both of these conditions are met:

1. The component is connected to Redux via connect()(Component).
2. The component isn’t rendered by a <Route>

In these cases, I wrapped the component’s connect with withRouter.

This allowed the router information to follow the component when it gets linked to, so the app still updates when the Redux state changes.

And that’s it!

This upgrade took me over a week — a few days of trying to figure out how to do it at all, and then another few days to start actually making changes. Upgrading to React Router 4 is a huge change not to be taken lightly, but it’ll make your router a lot more lightweight and easy to use.

Please don’t hesitate to comment/ask questions!

React is a JavaScript library for building user interfaces. With the React paradigm, every piece of the UI is a component that manages its own self-contained state (data) and functions.

React, like other front-end JavaScript frameworks, is useful for creating Single Page Applications (SPAs). These are web apps that do not need a full page reload on change of view. Instead they swap views into or out from a section of the page as the user navigates through the app.

Though SPAs provide a fluid navigation experience for users, routing features of traditional websites are expected.

For instance:

• every view on the screen should have its own specific URL so I can bookmark the page.
• The forward and back button should move me forward or backward in my browsing history.
• Nested views and those with parameters should be supported, such as **example.com/products/shoes/101**.

In the React community, React Router is the favorite library for handling routing. The most compelling aspect of this version of the library is that it’s “just React”. The routes are just components that get rendered to the screen when the app is running. They are not defined in external files as done in other frameworks.

Prerequisites

You will need the following: Basic knowledge of React, Git installed on your computer, and NPM installed on your computer.

Setting Up

If you have Git installed locate the empty source files (at the master branch) and clone to your computer using:

git clone https://github.com/emmyyusufu/react-router-demos.git

Open the folder in your text editor and discover the sub-folders inside:

This post is divided into four subsections according to the folders which are: **Basic routing**, **Nested routing**, **Nested routing with path parameters** and **Authenticated routing**.

To launch the demos, open a given folder in your terminal then run npm install followed by npm start.

#1 Basic routing

Lets start out from scratch. Notice the folder structure of the basic routing folder.

Modified create-react-app folder structure.

All the demos in this post have been initially created using create-react-app. This brings some benefits such an already configured Webpack server that would bundle all the JavaScript file in our app into a **bundle.js** file that would be attached into the **index.html** file at run time. At run time Webpack’s dev server will listen to any change in our file and update it as the app runs during development.

I’ve created a **components/** folder to keep all our components. Note that:

• **index.js** is the entry file to all **.js** files in our app. This is where Webpack’s bundling will be performed so all **.js** files should be imported into it.
• **App.js** file will contain everything pertaining to our React app.

By default, create-react-app does not place **App.js** in this folder. But because I’ve modified the folder structure, I made the appropriate changes to the path url and imported it into **index.js**. To learn more about create-react-app, this reference would be helpful.

Navigate to the first folder **01-basic-routing** and run npm install.

Open the App.js file and you should see the following:

import React, { Component } from 'react';import '../styles/App.css';

// import route Components here

class App extends Component {  render() {    return (      <div className="App">

<div className="container">          <ul>            <li><a href="">Hello</a></li>            <li><a href="">About</a></li>            <li><a href="">Books</a></li>          </ul>          <hr/>

{/* Routes will go here */}

</div>

</div>    );  }}

export default App;

Run npm start and view the app. No changes made yet.

No changes made

Lets install React Router via NPM. With the folder open in your terminal, run:

npm install react-router-dom

Why **react-router-dom**? This is because the React router library comprises of three packages: react-router, react-router-dom, and react-router-native.

react-router is the core package for the router, whereas the other two are environment specific. You should use react-router-dom if you’re building for the web, and react-router-native if you’re on a mobile app development environment using React Native.

Import the following into **App.js**

// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'

Later on we will understand what those components do. All of the routing components depend on BrowserRouter to provide the browser’s HTML5 History APIs to them.

Note that React components have their first letter capitalized so as to identify them differently from default HTML tags.

The History API is an object that lets us manage the current location via history.location as well as previous locations. Think of the location property of the object as an array. The current location is the last item on the array and we manipulate the array through methods such as history.push() orhistory.replace. Whatever manipulation is made on the array will trigger a page transition to the current location. This is what happens behind the scene when using Link and Redirect components as we’ll see soon.

We’ve imported the contents of BrowserRouter into the Router variable. We need to wrap our entire app with it so it supplies the needed APIs all through the app. In **App.js** add:

import React, { Component } from 'react';import '../styles/App.css';

// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'

class App extends Component {  render() {    return (      <Router>        <div className="App">

<div className="container">            <ul>              <li><a href="">Hello</a></li>              <li><a href="">About</a></li>              <li><a href="">Books</a></li>            </ul>            <hr/>

{/* Routes will go here */}

</div>        </div>      </Router>    );  }}

export default App;

The <Route /> component

Lets begin exploring the _Route_ component. This component renders a page if the current URL location matches the _path_ prop specified in it. It also accepts _component_, _render_ and [children](https://reacttraining.com/react-router/web/api/Route/children-func) props.

Lets create ours where its written {/ Routes will go here /}:

<Route path="/hello" component={Hello} /><Route path="/about" component={About} /><Route path="/books" component={Books} />

But those components don’t exist! Yes, you are right.

Again before we create them, lets add more imports to App.js. Import from the HelloComponent.js, AboutComponent.js, and BooksComponent.js using Hello, About, and Books as variables. The component={} prop uses curly braces to refer to variables not strings.

import React, { Component } from 'react';import '../styles/App.css';

import Hello from './HelloComponent';import About from './AboutComponent';import Books from './BooksComponent';

// import route Components hereimport {  BrowserRouter as Router,  Route,  Link,  Switch,  Redirect} from 'react-router-dom'

Note that render is similar to component={} but it lets us define a component inline and right there:

<Route path="/hello" render={() => {           return (              <div className="jumbotron">                <h1 className="display-3">Hello, world!</h1>              </div>             );      }}/>

Head over to the empty HelloComponent.js file and paste:

import React from 'react';

const Hello = () => {    return (        <div className="jumbotron">            <h1 className="display-3">Hello, world!</h1>        </div>    );}

export default Hello;

We used a Stateless functional component (hence the arrow function) above. We use them for components that render only static content to a webpage as opposed to components that render stateful/changing content.

If you didn’t notice, we are using Bootstrap 4 styles in our App.css file hence the jumbotron class in the div.

// inside App.css. You'll need internet connection to load the Bootstrap 4 styles.

.App {  padding-top: 50px;}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');

Head over to the empty AboutComponent.js file and paste:

import React from 'react';

const About = () => {    return (        <div className="jumbotron">            <h1 className="display-3">About Me</h1>        </div>    );}

export default About;

Finally, head over to the empty BooksComponent.js file and paste:

import React from 'react';

const Books = () => {    return (        <div className="jumbotron">            <h1 className="display-3">My Books</h1>        </div>    );}

export default Books;

One more thing we need to wrap up this section is the Link component.

The </Link&gt; Component

This is replaces the default <a href=""&gt; HTML tag. It accepts a to="" prop that points to the URL location we want to go to.

Inside App.js, replace the default anchor tags with Link:

<ul>   <li><Link to="/hello">Hello</Link></li>   <li><Link to="/about">About</Link></li>   <li><Link to="/books">Books</Link></li></ul>

Run npm start from your terminal and see the complete app:

using Route and Link

How would you render a component if the / URL is visited, such as the landing or home page. Your guess may be to create a route for it:

<Route path="/" component={Home} />

This is fine but remember that the other paths have / in them. So if we visited other URLs such as /hello, /about and /books, theHome component will keep being rendered by default. To fix this, write another prop exact setting it to true or just write exact.

<Route path="/" exact={true} component={Home} />

This would ensure to Home component is rendered only in cases where the URL is exactly matches this:/.

Create a new HomeComponent.js file in **components/** folder. Paste this in:

import React from 'react';

const Home = () => {    return (        <div className="jumbotron">            <h1 className="display-3">Landing page</h1>        </div>    );}

export default Home;

Import into App.js

import Home from './HomeComponent';

Add to the list of routes

<Route exact={true} path="/" component={Home} /><Route path="/hello" component={Hello} /><Route path="/about" component={About} /><Route path="/books" component={Books} />

Visit http://localhost:3000 and view:

Home component rendered on ‘/’ path

Do some experiments. Remove exact={true} from Home route and see what happens. You’ll see why its important.

Always use exact={true} on the ‘/’ path, else every <Route /> will render.

The Component

This will require being wrapped around _Route_ components when needed for implementation. When a URL path is visited, it allows only the first _<Rou_te>that matches the path to be rendered.

Earlier we had an issue with / rendering the Home component and that of other paths. If we create a /hello/goodmorning path, what will happen? The components of the /hello and /hello/goodmorning path will be rendered. Switch will help in this case again by choosing only one route to render but the most important route must be arranged to come first.

Just an experiment

Using Switch, we can avoid what happens in the image above but only for URLs other than /. exact={true} handles it for /. Remember that Switch will pick only the first matching Route. Lets put it to work and see the result.

<Switch>    <Route exact path="/" component={Home} />    <Route path="/hello" component={Hello} />    <Route path="/hello/goodmorning" render={() => { return      <h1>Goodmorning</h1> }} />    <Route path="/books" component={Books} /></Switch>

Only the first route that matches /hello/goodmorning is rendered.

Furthermore, Switch allows us to specify a route to render if the URL matches no location. For that route, leave the path prop empty.

// Just an example. Don't implement. This catch-all Route would be at the bottom if implemented.

<Route component={NoMatch} />

In summary Switch will do the following:

• avoid inclusive route rendering.
• include a catch-all Route at the bottom of our Switch container.

#2 Nested routing

Remember that we could render components via Route inline or by specifying the component:

<Route component={SomeComponent}/>

Or

<Route render={() => { return <h1>Soemthing</h1> }/>

The component that will be created via Route will automatically be passed the followingprop objects:

• match
• location
• history

We will only explore the use of match as it is helpful for implementing nested routes. The match object contains the following properties:

• params — (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path.
• isExact — (boolean) true if the entire URL was matched (no trailing characters).
• path — (string) The path pattern used to match. Useful for building nested s
• url — (string) The matched portion of the URL. Useful for building nested s

We want to add new routes under the /book route. They will be books:

• HTML
• CSS
• React

Navigate to the second sub-folder **02-nested-routing** on your terminal and run npm install.

In your code editor, open BookComponent.js and modify:

const Books = ({ match }) => {    return (<div>   <div className="jumbotron">        <h1 className="display-3">My Books</h1>   </div>

  <div className="container">    <div className="row">

      <div className="col-md-3">          <ul>            <li><Link to="">HTML</Link></li>            <li><Link to="">CSS</Link></li>            <li><Link to="">React</Link></li>          </ul>      </div>      <div className="col-md-9">

               {/* place routes here */}      </div>    </div>

   </div>

</div>    );}

Lets install React Router via NPM. With the folder open in your terminal, run:

npm install react-router-dom

We’ve demonstrated syntactically that the match object is passed as props. Remember that the classes used are for Bootstrap’s styles to take effect. Don’t forget to import all React Router components after importing React:

import React from 'react';import {    BrowserRouter as Router,    Route,    Link,    Switch,    Redirect  } from 'react-router-dom';

We didn’t need to import all of them but we did anyway. Place the routes:

<Route path="" render={() => { return <h1>HTML by Ducket book</h1> }}/><Route path="" render={() => { return <h1>CSS by Racheal Andrews</h1> }}/><Route path="" render={() => { return <h1>React by Fullstack.io book</h1> }}/>

We are using inline component rendering to save time. Now, lets populate the to="" of Link and path="" of Route.

Make these changes:

<div className="col-md-3">    <ul>      <li><Link to={`${match.url}/html`}>HTML</Link></li>      <li><Link to={`${match.url}/css`}>CSS</Link></li>      <li><Link to={`${match.url}/react`}>React</Link></li>     </ul></div> <div className="col-md-9">

      <Route path={`${match.path}/html`} render={() => { return <h1>HTML by Ducket book</h1> }}/>      <Route path={`${match.path}/css`} render={() => { return <h1>CSS by Racheal Andrews</h1> }}/>      <Route path={`${match.path}/react`} render={() => { return <h1>React by Fullstack.io book</h1> }}/>

</div>

${match.url} evaluates to /books and ${match.path} evaluates to localhost://3000/books. The back ticks used are ES6’s way of concatenating strings containing variables.

Give it a save, run npm start and view the working app.

Nested routes

#3 Nested routing with path parameters

Any URL that ends with /:id,/:user or /:whatever indicates that that portion is a dynamically generated part of the URL that could be any value.

We can access such portions via match.params.id for use in routing.

Again open the third sub-folder **03-nested-routing-with-path-parameters** in your terminal and run npm install.

Also, lets install React Router via NPM. With the folder open in your terminal, run:

npm install react-router-dom

To illustrate the how path parameters can be used for routing, paste the following in Book.js:

import React from 'react';import {    BrowserRouter as Router,    Route,    Link,    Switch,    Redirect  } from 'react-router-dom';

const Books = ({ match }) => {    return (        <div>            <div className="jumbotron">                <h1 className="display-3">My Books</h1>            </div>

<div className="container">          <div className="row">              <div className="col-md-3">          <ul>              <li><Link to={`${match.url}/html`}>HTML</Link></li>              <li><Link to={`${match.url}/css`}>CSS</Link></li>              <li><Link to={`${match.url}/react`}>React</Link></li>          </ul>                </div>                <div className="col-md-9">                    <Route path={`${match.path}/html`} render={() => { return <h1>HTML by Ducket book</h1> }}/>                    <Route path={`${match.path}/css`} render={() => { return <h1>CSS by Racheal Andrews</h1> }}/>                    <Route path={`${match.path}/react`} render={() => { return <h1>React by Fullstack.io book</h1> }}/>                    <Route path={`${match.path}/:id`} component={Child} />                </div>            </div>            </div>        </div>    );}

const Child = ({ match }) => (    <div>      <h3>URL ID parameter: {match.params.id}</h3>    </div>);

export default Books;

Run npm start.

accessing /:id parameter value

#4 Protected path routing

This kind of routing is for pages of a website that need the user to login and be authentication before viewing such pages. An example is an Admin page.

To handle protected paths, we’ll need to use <Redirect/> (a standard component)and <PrivateRoute/> (a custom component).

<PrivateRoute/> is not the standard &lt;Route/> component. The standard route component provided by React Router is;. We will define as` our own custom .

Custom routes are necessary when we need to make a decision whether a <Route/> of interest should be rendered or not. As you’ll see in the code, we will list <PrivateRoute/> together with other s.

The component

Rendering a will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

<Redirect/> has a couple of props but we will be using the to object prop this way:

<Redirect to={{        pathname: '/login',        state: { from: props.location }      }}/>

When used, this will redirect to the /login path. Information about the last location before the redirect was done will be accessible by the LoginPage component via this.props.location.state.

Navigate to the last sub-folder **04-authenticated-routing**. Run npm install.

Install React Router via NPM. With the folder open in your terminal, run:

npm install react-router-dom

Open App.js and add a new list /admin item to the existing ones.

<ul>     <li><Link to="/hello">Hello</Link></li>     <li><Link to="/about">About</Link></li>     <li>         <Link to="/books">Books</Link>     </li>     <li>         <Link to="/admin">Admin</Link>     </li></ul>

Add <PrivateRoute/>; and /login route to the group of existing &lt;Route/>s.

<Switch>            <Route exact path="/" component={Home} />            <Route path="/about" component={About} />            <Route path="/hello" component={Hello} />            <Route path="/books" component={Books} />            <Route path="/login" component={Login}/>            <PrivateRoute authed={fakeAuth.isAuthenticated} path="/admin" component={Admin} />          </Switch>

Now create the <PrivateRoute/> component outside of App component:

const PrivateRoute = ({ component: Component, ...rest }) => (  <Route {...rest} render={props => (    fakeAuth.isAuthenticated ? (      <Component {...props}/>    ) : (      <Redirect to={{        pathname: '/login',        state: { from: props.location }      }}/>    )  )}/>)

<PrivateRoute/> will eventually render down to a &lt;Route> component. The component uses a ternary operation to determine what to render based on whether the user is logged in or not: a <Redirect/&gt; to the login page or Admin page component.

Create the Admin component:

const Admin = () => {  return (    <div className="jumbotron">      <h3 className="display-3">Admin Access granted</h3>    </div>  );}

Also, create the Login component:

class Login extends React.Component {      constructor() {      super();        this.state = {        redirectToReferrer: false      }      // binding 'this'      this.login = this.login.bind(this);    }      login() {        fakeAuth.authenticate(() => {        this.setState({ redirectToReferrer: true })      })    }      render() {      const { from } = this.props.location.state || { from: { pathname: '/' } }      const { redirectToReferrer } = this.state;        if (redirectToReferrer) {        return (          <Redirect to={from} />        )      }        return (        <div className="jumbotron">            <h1 className="display-3">Login required</h1>            <p className="lead">You must log in to view the page at {from.pathname}.</p>            <p className="lead">              <a className="btn btn-primary btn-lg" onClick={this.login} role="button">Login</a>            </p>        </div>      )    }  }    /* A fake authentication function */  export const fakeAuth = {      isAuthenticated: false,    authenticate(cb) {      this.isAuthenticated = true       setTimeout(cb, 100)    },  }

This Login component implements a fake authentication function that will set a user either logged in or out.

Run npm start and see the working app.

Authentication process

This brings us to the end of the article. Kudos to you if you made it this far. If you would like more details about React Router, view the Documentations.

If you would like the completed version of the code, visit the completed branch on Github.

Feel free to support me (devapparel.co) and look good while at it. Also, Comment or Share this post. Thanks for reading!

Originally published at Zeolearn Blog.