React Router URL not found if refresh page - Create React App

Question

I have an React app with different pages (ROUTER). I can go from a page to another, refresh the page and everything is working totally fine in local.

If I deploy the app npm run built and upload it to my host infinityfree.net all the time I want to refresh a page or use a direct link I get a 404 ERROR.

I tried catch all routes but it is not working

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <ul>
            <li><Link to="/">Main</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/SomethingElse">Something else</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/about" component={About} />
            <Route path="/SomethingElse" component={SomethingElse} />
          </Switch>
        </div>
      </Router>
    );
  }
}

Any tips? Thank you!

please specify if you are using a node app server to serve your app or just a web server to return your js files; if you are using node, please show us the server config — Incepter
– Incepter, Commented Apr 9, 2020 at 14:37
I run npm run built and I copy and paste the files into my File Manager area infinityfree.net — Fran Miller
– Fran Miller, Commented Apr 9, 2020 at 14:53

Soufiane Masmoud · Accepted Answer · 2020-04-09 14:41:49Z

7

Once you refresh a page in a different route your http server won't be able to get the file corresponding to that route since it doesn't exist

so you have to redirect all the routes to index.html which is the root of your app

so if you are using apache you can add .htaccess to the root of your project and this is its content

<IfModule mod_rewrite.c>

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

</IfModule>

edited Apr 9, 2020 at 14:41

answered Apr 9, 2020 at 14:39

Soufiane Masmoud

8266 silver badges11 bronze badges

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

1 Comment

tmsnvk Over a year ago

had a similar problem as OP, thanks for your reply, it helped me as well, cheers!

kuzditomi · Accepted Answer · 2020-04-09 14:38:14Z

0

You need to setup the host to always leave the routing to react. Search for X routing config for react, depending on what you use X can be Apache, Nginx, whatever.

answered Apr 9, 2020 at 14:38

kuzditomi

7401 gold badge5 silver badges26 bronze badges

Comments

Carlos Saiz Orteu · Accepted Answer · 2020-04-09 14:39:48Z

0

That happened to me when I de0loyed my react app to netlify. You need to include a file called _redirects that contains the following line inside:

/* /index.html 200

Add this file to your build folder once you have run the deploy script and then upload it!

answered Apr 9, 2020 at 14:39

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Comments

Adam Jeliński · Accepted Answer · 2020-04-09 14:40:56Z

0

You probably haven't configured your hosting correctly.

When you access mypage.example.com/ the server will give you the file index.html, which is the one that shows your app. Though, if you try to access mypage.example.com/about, the server will try to find the about folder and fail, giving you a 404 error.

What you should do is configure the server to always give you the index.html if the url isn't a real file.

Here is how you can do that for Apache: https://stackoverflow.com/a/45723487

answered Apr 9, 2020 at 14:40

Adam Jeliński

1,7981 gold badge12 silver badges22 bronze badges

Comments

Kurtis Rogers · Accepted Answer · 2020-04-09 15:00:29Z

0

Htaccess file. There are a bunch of other things to consider too but this is my sites htaccess config:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
AddType x-httpd-php7 .php

Depends entirely on your server/deployment though!

answered Apr 9, 2020 at 15:00

Kurtis Rogers

955 bronze badges

Comments

ROMBO HAK-LGITE · Accepted Answer · 2024-04-22 09:45:59Z

If you're using BrowserRouter in your React app, try switching to HashRouter. BrowserRouter relies on HTML5 history API, which might not be fully supported by some hosting environments. HashRouter uses the URL hash to simulate a full URL so that the page won't reload when the URL changes.

like this code :
 <HashRouter>
        <ScrollToTop />
         <Header  />
        <Routes>
       
          <Route path="/" index element={<Index  />} />
          <Route path="/Account"  element={<Account  />} />
          <Route path="/Produite/:id"  element={<Produite  />} />
          <Route path="/Cart"  element={<Cart_Product  />} />
          <Route path="/DeleteConfierm/:id"  element={<DeletePageConfierm  />} />
          <Route path="/category/:nom"  element={<Category_pro  />} />
          <Route path="/ProductsSearch/:valueSearch"  element={<Product_Search  />} />
          <Route path="*"  element={<Page_NOTFOUND  />} />

        </Routes>
        <Footer/>
    </HashRouter>

Collectives™ on Stack Overflow

React Router URL not found if refresh page - Create React App

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related