I published my first react app to my shared hosting.

It was multi-page react application, After I built my project successfully, I did Yarn Build which made a build folder

I uploaded that built folder to my hosting but for some reason my hosting is only showing the homepage and no other pages (The other pages were working in localhost)

This is the link to my website: / and this is the link to my github repo

In the repo, routes, I have a path named printing

 <Route exact path="/printing" ponent={Printing} />'

but when I go to spaceyfi/printing, it doesn't open up.

[Update:] Here is my build folder which only contains one HTML file (if that is relevant)

[Question:] How can I fix it?

I published my first react app to my shared hosting.

It was multi-page react application, After I built my project successfully, I did Yarn Build which made a build folder

I uploaded that built folder to my hosting but for some reason my hosting is only showing the homepage and no other pages (The other pages were working in localhost)

This is the link to my website: http://spaceyfi./ and this is the link to my github repo https://github./irohitb/portfolio-

In the repo, routes, I have a path named printing

 <Route exact path="/printing" ponent={Printing} />'

but when I go to spaceyfi./printing, it doesn't open up.

[Update:] Here is my build folder which only contains one HTML file (if that is relevant) https://github./irohitb/portfolio-/tree/master/build

[Question:] How can I fix it?

• javascript
• reactjs
• react-router
• create-react-app

• I'm still very new to React so I'm just making an observation, but you are exporting your ponents with lowercase and calling them with uppercase export default printing and ponent={Printing} - Not sure if this is causing the page to not be found? – Mike Diglio Commented Aug 23, 2018 at 13:35
• @MikeDiglio Even I am also new, but still, In JS (probably) if you use export default then you can import it with whatever name you want i.e I can even use something like ponent={Ptg} until and unless I am importing it with that name i.e import Ptg from './container/Printing/printing.js' – Alwaysblue Commented Aug 23, 2018 at 13:41

4 Answers 4

So, I was using a hosting by Namecheap (shared hosting) and in order to use other routes you need to do this

In the directory where we are uploading/putting our files.. We need to create an .htaccess. In that .htaccess put this configuration (for me copied and past did the job)

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

You have a static website with one index.html. You want react-router to handle all the requests and the navigation for you.

Right now, when you hit spaceyfi./printing, The Apache server searches for directory printing and index.html in the directory. Not finding one, it's response is 404 not found.

In webpack development mode dev server config has historyApiFallback fo that purpose:

  devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: {
      index: '/'
    }
  }

To configure your web server to make react-router handle ALL the routes, you need to modify the redirection rules.

If you use Amazon S3 for statis hosting, read this guide.

If you're using other service for static hosting, refer to the documentation. The configuration should look something like this:

I hope this answer was helpful and pointed you to the right (re)direction.

Make sure to use react-routerLink ponent for navigation as well.

For GCP Storage (Google equivalent of S3), I followed yotke's suggestion and it worked great:

gsutil web set -m index.html -e index.html

I'm using a Hostinger server, where I created a .htaccess file and added this >

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

To handle all of my routings and stopped showing the mon error.