How to fix an 404 error when directly typing in the url in the browser (react-router-dom)?

Question

I want to let users access specific pages when typing in for example www.page-url.com/about-us instead of going via www.page-url.com and then choose about us in the nav bar. When I type in www.page-url.com/about-us, I get a 404 error (page not found). How can this action be prevented? I have tried different solutions from questions here on SO, but none of them worked.

Router code:

<Router >
        <MobileNavbar />
        <Navbar />
        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/om-oss' component={AboutUs} />
          <Route path='/sponsorar' component={Sponsor} />
          <Route path='/bli-sponsor' component={BecomeSponsor} />
          <Route path='/bli-medlem' component={BecomeMember} />
          <Route path='/admin' exact component={Admin} />
          <Route path='/admin-login' exact component={AdminLogin} />
          <Route path="/admin/bytt-passord" exact component={ChangeCreds} />
          <Route path="/admin/medlemer" exact component={Members} />
          <Route path="/til-foreldre" component={Parents} />
          <Route path="/kalendar" component={Calendar} />
          <Route path="/admin/kalendar" exact component={AdminCalendar} />
        </Switch>
        <Footer />
      </Router>

How is your app hosted? If you are using nginx, you have to configure your server to point the request to your SPA index html — Ari Seyhun, Jun 01 '21 at 08:21
Do you want to prevent showing 404 error pages? In your current router configs, please take an example — TopW3, Jun 01 '21 at 08:24
I host my app via Firebase hosting to a domain bought here in Norway. I want to let users access for example the About us-page with typing in www.page-url.com/about-us, but when I do this, I get a 404 page not found-error. — Daniel Olsen, Jun 01 '21 at 08:31
you are getting the 404 error because it don't see any route which is matching the path `/about-us` — Shyam, Jun 01 '21 at 08:48

Shyam · Answer 1 · 2021-06-01T08:45:05.663

0

When the user types some route which you are not supporting then you can have a catch all Route. Add this at the bottom of your Switch .

<Route path='*'><SomeComponent /></Route>

Catch All Routes

edited Jun 01 '21 at 08:45

answered Jun 01 '21 at 08:22

Shyam

5,292
1
10
20

But does this let the user to access the About us page with going directly to www.page-url.com/about-us, or does this redirect a user to another component if I do not support the route? – Daniel Olsen Jun 01 '21 at 08:34
is will render the . – Shyam Jun 01 '21 at 08:37
Do you have any example of how I can avoid the 404 error when accessing the AboutUs component, in the code above, directly? I tried you solution, but nothing changed. – Daniel Olsen Jun 01 '21 at 08:38
I have done exactly what you have done in your code sandbox example, but I still get a 404 error – Daniel Olsen Jun 01 '21 at 08:51
did you try this - https://stackoverflow.com/questions/58096096/404-page-not-found-when-running-firebase-deploy – Shyam Jun 01 '21 at 08:56
1

The answer from your link fixed my problem. Thanks! – Daniel Olsen Jun 01 '21 at 09:50

How to fix an 404 error when directly typing in the url in the browser (react-router-dom)?

1 Answers1