How to add hash to urls in react-router 4

Question

I would like to add hash to my endopints in react-router for preventing error responses from server. I'm using python -m SimpleHTTPServer -p 8888 for creating server.

This short example works but when I'm trying reload page on some route like /about then I get an error: Error response Error code 404. Message: File not found. Error code explanation: 404 = Nothing matches the given URI.

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

const Routes = () => (
    <Router>
        <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>
    </Router>
);

class App extends React.Component {
    render() {
        return (
                <Routes />          
        );
    }
}

Answer 1

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