Types of router

There are 3 types of router

  1. Memory Router  2.Hash Router 3. Browser Route

1.Memory Router:

keeps url changes in memory, not in the browser.It doesn’t change URL in the browser while it keeps history of URL in browser.Used in React-Native.

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;

 2.Hash Router

Uses client-side routing it uses hash portion of url to keep url in sync.It uses legacy browser

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;

3.Browser Router

It uses html5 api history to keep your UI in sync  with URL .It routes as a normal URL in the browser and assumes that the server is handling all the request URL.

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;

 


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top