How to add hash to urls in react-router 4 How to add hash to urls in react-router 4 reactjs reactjs

How to add hash to urls in react-router 4


There are two ways to go around it:

1) Make your web server respond always with the same index.html file, no matter the route. This will prevent the 404 errors, but is not perfect as it won't support browser caching

2) Use HashRouter - it will keep the UI route in hash part of the URL, which should not make the server return 404 and will enable browser-side cache. The downside of this approach is that you can't use #target links to specific parts of the webpage


I didn't look at the documentation well, below there is the solution:

const Routes = () => (    <HashRouter basename="/#">        <div>            <ul>                <li><Link to="/about">About Link</Link></li>                <li><Link to="/company">Company Link</Link></li>            </ul>            <Switch>                <Route path="/about" component={About} />                <Route path="/company" component={Company} />            </Switch>        </div>    </HashRouter>);