React Router doesn't render components after build to ftp server

Question

I built react app with yarn build . To get the app running On my server, I added "homepage": "./" to the package.json file. The app is stored in a folder on the server, and I access the app with https://my-url.com/appname

The App.js get's rendered, but I don't see my components:

function App() {
  const [navigationState, setNavigationState] = useState(false);

  return (
    <div className="App">
      <Router>
        <Header
          showNavigation={navigationState}
          setShowNavigation={setNavigationState}
        />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/contact" exact component={Contact} />
        </Switch>
        <Footer />
      </Router>
      <div className="space"></div>
    </div>
  );
}

In the Header component I have my links like

<Link to="/">Home</Link>
<Link to ="/contact">Contact</Link>

When I click on Home the URL switches to https://my-url.com/ and I see the Home component. After clicking on Contact the URL switches to https://my-url.com/contact and I see the contact.

My .htaccess looks like:

<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>

What do I need to do, to keep the folder path and render the home component on the first call?

• https://my-url.com/ 404
• https://my-url.com/appname shows App Component but doesn't render the Home component
• https://my-url.com/appname/contact 404
• https://my-url.com/contact 404

After clicking on the Home link I get -https://my-url.com/ showing the home component After that clicking the Contact link, I get https://my-url.com/contact showing the contact component

Reloading the page on both urls gives 404 .

This is my package.json :

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "BROWSER=firefox PORT=2000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "./"
}

Answer 1

I faced this problem in previous project because it was GoDaddy Linux host with apache so I added this line

"homepage": "my-url.com" to your package.json

then I edited my .htaccess file added my main rout on it

the file I used has this content

RewriteOptions inherit
RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . / [L]

Answer 2

I think it might be related to the way the react-router is handling rendering either by the client or server-side rendering (SSR). Please check this docs fragment to set it up correctly for client-side https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

or Try to change the config of rendering to SSR and it should be okay.

Answer 3

To get it working, I did the following steps:

• Add .htaccess file to public folder:

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

• Modify the package.json and add:

"homepage": "http://my-url.com/foldername"

• In the App.js add the folder name to the <Route path="<<here>>" /> :

<Route path="/foldername/" exact component={Home} />
<Route path="/foldername/contact" exact component={Contact} />

Answer 4

Same problem for me, i had to switch in App.jsx BrowserRouter to HashRouter (my ftp doesn't handle BrowserRouter), and after everything works fine.