React router works only with /#/ within the URL, otherwise error 404 on a Ubuntu server

Question

My app is deployed (npm run build) on a Ubuntu server. I'm using a Router in my App and when clicking on a link (i.e contact-us), it's working - user is redirected to the page.

But if I'm trying to access to the contact-us page directly (http://my_ip/contact-us), I get a 404 response.

Note: If I add a /#/ to the url, it does work! i.e http://my_ip/#/contact-us.

Some code:

 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    import history from './history';
    
        render() {
            return (
              <div className="page">
                <Router history={history}>
                <Header />
                  <Switch>
                    <Route path="/combination/:some_id" exact component={SomePage} />
                    <Route path="/" exact component={Home} />
                    <Route path="/contact-us" exact component={ContactUs} />
                  </Switch>
                </Router>
              </div>
            )
          }

History.js:

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Update The problem was Nginx configuration: Adding the following line solved it.

try_files $uri $uri/ /index.html;

But now the problem is for the first Route (SomePage),

I just see a blank page! No error 404. what does it mean?

Yep, you are using the HashRouter https://reactrouter.com/web/api/HashRouter You must use the BrowserRouter https://reactrouter.com/web/api/BrowserRouter — NoNickAvailable, Aug 06 '20 at 22:41
@NoNickAvailable Thanks, I'll try! Does it matter if I put it in index.js or App.js? — wp42, Aug 06 '20 at 22:46
You must only change the import to 'BrowserRouter as Router' — NoNickAvailable, Aug 06 '20 at 22:48
what is the history variable you are using there ? is it createBrowserHistory ? — Pranay Tripathi, Aug 06 '20 at 23:02
yes :import { createBrowserHistory } from 'history'; export default createBrowserHistory(); — wp42, Aug 06 '20 at 23:04
No problem. I think your import is wrong: correct createBrowserHistory to only browserHistory. And you can directly import it together with BrowserRouter in one line. Check out this answer: https://stackoverflow.com/a/35185338/8605830 — NoNickAvailable, Aug 06 '20 at 23:16
@NoNickAvailable could you please look at my updated answer? — wp42, Aug 07 '20 at 09:02
@NoNickAvailable no, Only for that specific url template /combination/:some_id — wp42, Aug 07 '20 at 13:55

React router works only with /#/ within the URL, otherwise error 404 on a Ubuntu server

0 Answers0