On page refresh getting "404 not found" error in react js

Question

I have route

import { HashRouter } from 'react-router-dom';

 <HashRouter>
  <BrowserRouter>
    <Switch>
      <Route path="/admin" render={props => <AdminLayout {...props} />} />
      <Route path="/auth" render={props => <AuthLayout {...props} />} />
      <Redirect from="/" to="/auth/login" />
    </Switch>
  </BrowserRouter>
  </HashRouter>

When I refresh the page on the server getting a 404 error. also how to set base URL?

That doesn't sound like a react or react-router problem, it sounds like a webserver configuration problem, or the use of a relative script in your index.html (./reactprojectname.js instead of a absolute path /reactprojectname.js) — Brian Thompson
– Brian Thompson, Commented Jun 4, 2020 at 17:07
this might help you stackoverflow.com/questions/27928372/… — arnavpanwar99
– arnavpanwar99, Commented Jun 4, 2020 at 17:10
You can check this about how to solve 404 Error on servers. I am also wondering if we use both HashRouter and BrowserRouter together in an app? Here is example of How to use HashRouter with basename. — Ajeet Shah
– Ajeet Shah, Commented Jun 4, 2020 at 17:24

Pablo Naveira López · Accepted Answer · 2022-01-25 11:56:47Z

2

This is really simple.

Create a .htaccess file on /public_html folder and copy that code:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

If you want to know about the process, read this article: https://ui.dev/react-router-cannot-get-url-refresh/

answered Jan 25, 2022 at 11:56

Pablo Naveira López

964 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

On page refresh getting "404 not found" error in react js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related