I recently made my first posted website. I made something quick and basic to start off with using create-react-app to make a home page, an about page and a contact page. This was just basic structure so I could build up.

I used npm run build and then took the build files over to the server I was using (InfinityFree) and uploaded them. I could then type in my home page url and find it working fine. I could use my basic navbar to travel between the home page and the subpages. Everything shows up fine and works as planned.

I then tried to go to one of the subpages directly by copying the url and pasting it into the browser which then gave me the 404 page. This is the exact url that is shown when navigated to from the home page.

What am I missing here? Is it an issue with react-router-dom which I used to navigate between the pages? Maybe just a general React issue?

CodePudding user response：

You can lookup the document here

https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

I solved this by add .htaccess in the public folder.

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

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

CodePudding user response：

React-router urls don't work when refreshing or writing manually

I found this after more searching for a while which explains my problem and also gives a very thorough answer. Of course there are multiple solutions but I used HashRouter instead of BrowserRouter as I don't need SOE support.