There are 3 types of router
- 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;