React Router is a collection of navigational
components that compose declaratively with your application.
React router gives us three components [BrowserRouter, Route, Link] which helps
us to implement the routing to the apps.
Route
History:
Every router creates history object to keep track
of the current location of the page.
There are two types of router object:
1. BrowserRouter
2. HashRouter
If we want to handle the dynamic request then use
BrowserRouter and if we want to serve the static request then use HashRouter.
Is
React Router Static or Dynamic?
Before the react router v4 it is static after v4
it is Dynamic.
As an Example 1,
First we need to create a react app and the need
to install “react router dom” npm command.
Install –
npm i react-router-dom
Currently, in our app, there is only a single App
component. This component created by default when react app was created.
Now we
need to create some other component for routing purpose. In this demo, I have
created multiple components i.e.
1. Home
(home.js)
2. Users
(users.js)
3. UserDetail
(userDetail.js)
4. AddUserDetail
(addUserDetail.js)
Note
– App component (app.js) is created at the time when project are created.
Now our app has five components one is App and
the other four are Home, Users, UserDetail, AddUserDetail, and App.
Open
the index.js file and import the App and BrowserRouter components
–
index.js -
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './App';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Create
an AppRouter and import the Switch, Route, Redirect components
from the “react router dom” and also import our custom components (Home, Users,
UserDetail, AddUserDetail) in the Approuter i.e.
Approuter.js–
import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import Home from './view/home/home';
import Users from './view/addblog/Users';
import UserDetail from './view/UserDetail/UserDetail';
import AddUserDetail from './view/AddUserDetail/AddUserDetail';
function AppRouter() {
return(
<Switch>
<Route path='/' exact component={Home} />
<Route path='/users' component={Users} />
<Route path='/UserDetail' component={UserDetail} />
<Route path='/AddUserDetail' component={AddUserDetail} />
<Redirect from='/*' to='/pagenotfound' />
</Switch>
)
}
export default AppRouter;
Now
come to the App.js and import Approuter,
import React from 'react';
import './App.css';
import AppRouter from './Approuter'
function App() {
return (
<div className="App">
<AppRouter />
</div>
);
}
export default App;
Finally
Use this react routing in your components,
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class Header extends Component {
constructor(props) {
super(props);
this.state = this.props.location.state;
}
componentDidMount() { }
render() {
return (
<>
<div><Link to="/users">User List</Link></div>
<div><Link to="/UserDetail">User Info</Link></div>
<div><Link to="/AddUserDetail">Add New User</Link></div>
</>
)
}
}
As an Example 2,
Installation
-
npm install react-router-dom --save
Then
with a module bundler like webpack, use as you would anything else:
export default App;
// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";
// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;
Explore this example in detail- click…