Different Types of Routers in ReactJS

It’s a router that doesn’t change the URL in your browser. It keeps a track of the changes to the URL by storing them in the memory. The history of the URL is kept in the memory. This router is used for testing and non-browser environments such as React Native. It doesn’t have history in the browser, hence you cannot go back or forward in the browser.

Syntax

import { MemoryRouter as Router } from 'react-router-dom';

Example

import React, { Component } from 'react';

import { MemoryRouter as Router, Route, Link, Switch }

from 'react-router-dom';

import Home from './component/home';

import About from './component/about';

import Contact from './component/contact';

import './App.css';

class App extends Component {

render() {

return (

<Router>

<div className="App">

<ul className="App-header">

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">

About Us

</Link>

</li>

<li>

<Link to="/contact">

Contact Us

</Link>

</li>

</ul>

<Switch>

<Route exact path='/'

component={Home}>

</Route>

<Route exact path='/about'

component={About}>

</Route>

<Route exact path='/contact'

component={Contact}>

</Route>

</Switch>

</div>

</Router>

);

}

}

export default App;

This is a popular router for modern browsers that uses HTML 5 history API (replaceState, pushState and popState API). It keeps the UI in sync with the URL. Browser router works by routing as a normal URL in the browser by assuming that the server is handling all the requested URL (eg., /, /about) and points to root index.html. It also supports legacy browsers that do not support HTML 5 pushState API by accepting forceRefresh props.

Syntax

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

Example

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link, Switch }

from 'react-router-dom';

import Home from './component/home';

import About from './component/about';

import Contact from './component/contact';

import './App.css';

class App extends Component {

render() {

return (

<Router>

<div className="App">

<ul className="App-header">

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About Us</Link>

</li>

<li>

<Link to="/contact">

Contact Us

</Link>

</li>

</ul>

<Switch>

<Route exact path='/'

component={Home}>

</Route>

<Route exact path='/about'

component={About}>

</Route>

<Route exact path='/contact'

component={Contact}>

</Route>

</Switch>

</div>

</Router>

);

}

}

export default App;

It uses client-side hash routing. The hash portion of the URL is used (i.e. window.location.hash) to keep your UI in sync with the URL. The server will not handle it. The role of the server will be to send the index.html for the requests while ignoring the hash values.

No server configuration is required for handling the routes. The hash portion of the URL is also used to support the mainstream web browsers that generally do not offer support for HTML pushState API. 

This is a valuable concept for these browsers or in case your server doesn't handle the client-side.

Syntax

import { HashRouter as Router } from 'react-router-dom';

Example

import React, { Component } from 'react';

import { HashRouter as Router, Route, Link, Switch }

from 'react-router-dom';

import Home from './component/home';

import About from './component/about';

import Contact from './component/contact';

import './App.css';

class App extends Component {

render() {

return (

<Router>

<div className="App">

<ul className="App-header">

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About Us</Link>

</li>

<li>

<Link to="/contact">

Contact Us

</Link>

</li>

</ul>

<Switch>

<Route exact path='/'

component={Home}>

</Route>

<Route exact path='/about'

component={About}>

</Route>

<Route exact path='/contact'

component={Contact}>

</Route>

</Switch>

</div>

</Router>

);

}

}

export default App;