ReactJS | Types of Routers

On the basis of the part of URL that the router will use to track the content that the user is trying to view, React Router provides three different kinds of routers:

Pre-requisite: Before start this article you need to have basic knowledge of React Router.

Memory Router: Memory router keeps the URL changes in memory not in the user browsers. It keeps the history of the URL in memory (does not read or write to the address bar so the user can not use the bowser’s back button as well as the forward button. It doesn’t change the URL in your browser. It is very useful for testing and non-browser environments like React Native.

  • Syntax:
    import { MemoryRouter as Router } from 'react-router-dom';
  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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; 

    chevron_right

    
    

  • Output:

Browser Router: It uses HTML 5 history API (i.e. pushState, replaceState and popState API) to keep your UI in sync with the URL. It routes as a normal URL in the browser and assumes that the server is handling all the request URL (eg., /, /about) and points to root index.html. It accepts forceRefresh props to support legacy browsers which doesn’t support HTML 5 pushState API

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

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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; 

    chevron_right

    
    

  • Output:

Hash Router: Hash router uses client-side hash routing. It uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. Hash portion of the URL won’t be handled by the server, the server will always send the index.html for every request and ignore the hash value. It doesn’t need any configuration in the server to handle routes. It is used to support legacy browsers which usually don’t support HTML pushState API. It is very useful for the legacy browsers or you don’t have a server logic to handle the client-side. This route isn’t recommended to be used by the react-router-dom team.

  • Syntax:
    import { HashRouter as Router } from 'react-router-dom';
  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

  • Syntax:

react-js-img




My Personal Notes arrow_drop_up

Data Structure & Algorithms Lead (C++) Developer Student Club (Google) || MERN Stack Web Developer || Machine Learning Enthusiast || Skilled in C, C++, Java, Python, HTML, CSS, JS, React, NodeJS, Mongoose, Git among others

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.