Deployed React App to IONOS - 404 on page refresh

Question

I deployed my React app to IONOS, and it works correctly, but when I refresh the page in the browser, I get a 404 page.

https://hopers.io

The same app deployed to firebase works properly.

https://nft-marketplace-on-juno-chain.web.app

Here is my routing:

<Wrapper>   
  <Switch>
    <Route exact={false} path="/profile" component={MyNFT} />
    <Route
      exact={false}
      path="/collections/mintpass1"
      component={Marketplace}
    />
    <Route
      exact={false}
      path="/collections/hopegalaxy1"
      component={HopeMarketplace}
    />
    <Route
      exact={false}
      path="/collections/explore"
      component={ExploreMarketplace}
    />
    <Route exact={false} path="/detail" component={NFTDetail} />
    <Route exact path="/" component={Home} />
    <Redirect to="/profile" />   
  </Switch> 
</Wrapper>

Any comment will be very helpful.

Answer 1

Firebase, GitHub Pages, Surge, Now and Netlify all use 404.html to serve you soft 404s. I believe your hosting might be a LAMP Stack Hosting.

Please use the following .htaccess if it's supported or something similar to redirect all the requests to index.html:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

Learn more about this here:

• React-router URLs don't work when refreshing or writing manually
• The Ultimate Guide to .htaccess Files