CODEWITHSUNDEEP
javascriptreactjsreact-routercreate-react-app
Fran Miller
Fran Miller

Reputation: 1

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

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!

Upvotes: 0

Views: 2649

Answers (6)

ROMBO HAK-LGITE
ROMBO HAK-LGITE

Reputation: 1

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>

Upvotes: 0

Kurtis Rogers
Kurtis Rogers

Reputation: 95

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!

Upvotes: 0

Quantumass
Quantumass

Reputation: 836

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>

Upvotes: 7

Adam Jeliński
Adam Jeliński

Reputation: 1788

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

Upvotes: 0

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

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!

Upvotes: 0

kuzditomi
kuzditomi

Reputation: 730

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.

Upvotes: 0

Related Questions