ReactJS: Route using REACT-ROUTER-DOM

Today We are going to understand about the usage of Route using react-route-dom library!


1)We need to install react-route-dom, see the step to install this in below installation link.  REACT_ROUTE_DOM_Installation
2)Develop below component  to see the routing flow

• /src/pages/Home.js

import React from 'react'

export default function Home() {

return (

<div>

Hello this from Home Page

</div>

)

}

• /src/pages/Rooms.js

import React from 'react'

const Rooms = () => {

return (

<div>

Hello this is from Rooms page!!!

</div>

)

}

export default Rooms

• /src/pages/SingleRoom.js-This is class component

import React, { Component } from 'react'

export default class SingleRoom extends Component {

render() {

return (

<div>

Hello this is from Single Room Page!!

</div>

)

}

}

3)Update App.js as below

function App() {

return (

<div>

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

<Route exact path="/rooms" component={Rooms}/>

<Route exact path="/singleroom" component={SingleRoom}/>

</div>

);

}

4)Update Index component of your project as below

import React from 'react';

import ReactDOM from 'react-dom';

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

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

<Router>

<App />

</Router>,

document.getElementById('root'));

serviceWorker.unregister();

5)start server
npm start

6)Browse as below see the impact of routing to pages
http://localhost:3000/
http://localhost:3000/rooms
http://localhost:3000/singleroom

Requirement: Suppose there is no match of url then render the error page

Implementation:
To do so, we need to create use Switch and Route class.

1)Create one Error component as below

• /src/pages/Error.js

import React from 'react'

export default function Error() {

return (

<div>

This is an error page!!!!!

</div>

)

}

2)Update App.js as below

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Home from './pages/Home';

import Rooms from './pages/Rooms';

import SingleRoom from './pages/SingleRoom';

import Error from './pages/Error';

import {Route,Switch} from "react-router-dom";

function App() {

return (

<div>

<Switch>

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

<Route exact path="/rooms" component={Rooms}/>

<Route exact path="/singleroom" component={SingleRoom}/>

<Route component={Error}/>

</Switch>

</div>

);

}

export default App;