How to use react router to use Hash in URLs - reactjs

Question

i am new to react and facing a problem. I have a page which contain two tabs. I want to make a hash URL so that it can redirect to corresponding tabs on the basis of url hash. Similarly when i open the page and change a tab, url also updates. Kindly answer in a detailed way as i am new to this and donot know about professional terms.
Moreover i am also bound to use react router for this.
Note: I am using typescript in case it changes something for my solution.
Thanks in advance.

Answer 1

HashRouter uses a hash symbol in the URL, which has the effect of all subsequent URL path content being ignored in the server request (ie you send "www.mywebsite.com/#/person/id" the server gets "www.mywebsite.com". As a result, the server will return the pre # URL response, and then the post # path will be handled by parsed by your client-side react application.
example 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;