As well described in React's official docs, If you use routers that use the HTML5 pushState
history API under the hood, you just need to below content to .htaccess
file in public
directory of your react-app.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
And if using relative path update the package.json
like this:
"homepage": ".",
Note: If you are using react-router@^4
, you can root <Link>
using the basename
prop on any <Router>
.
import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>