React Router

4 Min. Read
Oct 13, 2019

What is React Router?

React router is a routing library built on top of the react which is used to create the routing in react apps. In single page apps, there is only single html page.we are reusing the same html page to render the different components based on the navigation.

But in multipage apps, you will get an entirely new page from the server when you navigate. This is when react router come in handy. React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.

Installing the React Router

We are using the create-react-app to create the app.

1
2

npx create-react-app routing
cd routing

To install the react router you need to download the react-router-dom package by running the following commands.

1
2

npm install react-router-dom
npm start  //to run  dev server

Now open the routing folder in your favorite code editor.

If you navigate to the public/index.html you will see a single html file which looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Currently, in our app, there is only a single App component.

Let’s create two more components.

users.js

1
2
3
4
5
6
7

import React from 'react'
class Users extends React.Component {
  render() {
    return <h1>Users</h1>
  }
}
export default Users

contact.js

1
2
3
4
5
6
7

import React from 'react'
class Contact extends React.Component {
  render() {
    return <h1>Contact</h1>
  }
}
export default Contact

Now our app has three components one is App and the other two are Users and Contact.

Routing

Open the index.js file and import the three components (App,Users,Contact)

index.js

1
2
3
4
5
6
7

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import Users from './users'
import Contact from './contact'
ReactDOM.render(<App />, document.getElementById('root'))

React router gives us three components [Route,Link,BrowserRouter] which help us to implement the routing.

index.js

1
2
3
4
5
6
7
8

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import Users from './users'
import Contact from './contact'
ReactDOM.render(<App />, document.getElementById('root'))

Let’s implement the routing.

In the Route component, we need to pass the two props

  • path: it means we need to specify the path.
  • component: which component user needs to see when they will navigate to that path.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
  <Router>
    <div>
      <Route path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Now if you enter manually localhost:3000/users you will see Users component is rendered.

However, the Home component is also rendered in the screen this happens because of our home path is ’/’ and users path is ‘/users’ slash is same in both paths so that it renders both components to stop this behavior we need to use the exact prop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Now if you see only users component is rendered on the screen.