React Router
In this tutorial you will learn about react router.
Table of contents
- Introduction
- What is react router?
- How to install the react router?
- Routing
Introduction
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.
Is react router is static or dynamic?
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.
Getting started
How to install the react router?
we are using the create-react-app to create the app.
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.
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.
<!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
import React from 'react'
class Users extends React.Component {
render() {
return <h1>Users</h1>
}
}
export default Users -
contact.js
import React from 'react'
class Contact extends React.Component {
render() {
return <h1>Contact</h1>
}
}
export default Contact -
app.js
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App
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
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
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.
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.
But still, 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.
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.
Adding Navigation using Link component
- index.js
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>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/users" component={Users} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))
After adding navigation you will see the routes are rendered on the screen. if you click on the users you will see url is changing and Users component is rendered.
