2

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.

Bikas Lin
  • 689
  • 5
  • 16

1 Answers1

2

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:

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 1
    Thanks for your answer. Would you let me know where `.htaccess` does locate? – Bikas Lin May 31 '22 at 11:46
  • 1
    @BikasLin It has to be in the same folder as your `index.html`. Check this out for more info: [The Ultimate Guide to `.htaccess` Files](https://code.tutsplus.com/tutorials/the-ultimate-guide-to-htaccess-files--net-4757). – Praveen Kumar Purushothaman May 31 '22 at 12:44
  • 1
    More on what a [soft 404](https://developers.google.com/search/blog/2008/08/farewell-to-soft-404s) is. To sum up, sometimes is a redirection to the index page, that's why it worked on Firebase and stuff (I was using Amplify from AWS and it works similarly). – Arturo Mendes Oct 03 '22 at 16:20