React Router DOM - Not working in sub to subdomain

Question

I have to build my first react project that uses react-router-dom

Yes, it's a multi-page project.

After, running the build command I have successfully tested my build file using Static Server - https://create-react-app.dev/docs/deployment/

Note: I have checked these links to deploy React application to the server

But, when I upload the project to my CPanel it opens the main pages successfully ( https://test.com/react-project/ ) but did not serve other routing pages ( https://test.com/react-project/page2 --- shows 404).

App.js code

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
  } from "react-router-dom";

import Home from './pages/Home';
import OnClick from './pages/OnClick';
import Clip from './pages/Clip';
import Cursor from './pages/Cursor';

function App() {
    
    return (
        <div className="App">

            <Router>

                {/* A <Switch> looks through its children <Route>s and
                    renders the first one that matches the current URL. */}
                <Switch>                    
                    <Route path="/onclick">
                        <OnClick />
                    </Route>
                    <Route path="/clip">
                        <Clip />
                    </Route>
                    <Route path="/cursor">
                        <Cursor />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </Router>
        </div>
    );
}

export default App;

.htaccess file

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

package.json file

{
  "name": "topbar",
  "homepage": ".",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "aos": "^2.3.4",
    "bootstrap": "^5.0.2",
    "glightbox": "^3.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-particles-js": "^3.5.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.3",
    "react-wavify": "^1.5.3",
    "sass": "^1.35.2",
    "swiper": "^6.8.0",
    "tsparticles": "^1.32.0",
    "typed.js": "^2.0.12",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Update:

Followed these links

and updated .htaccess file:

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

And now it does not show a 404 error instead it shows me the default page but with a different URL.

for example: If I enter https://test.com/react-project/page2 the URL will be the same but it serves the default page.

Note: My application is hosted in sub to sub-domain

https://test.com/app/react-first/

score 0 · Answer 1 · answered Aug 17 '21 at 07:02

0

Hello can you remove switch from your component and try like this

It is working fine on my development and .htaccess rules are:

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

answered Aug 17 '21 at 07:02

Akash Chavda

125
9

it did not work as now it completely removed the output with blank page – Owaiz Yusufi Aug 17 '21 at 07:55
if I remove exact keyword it works but with the same previous issues – Owaiz Yusufi Aug 17 '21 at 08:21

Owaiz Yusufi · Accepted Answer · 2021-08-19T13:22:29.553

So, after working around and searching the articles I got the solution

App.js

<BrowserRouter basename='/path/to/subfolder/'>
   .........
</BrowserRouter>

.htaccess file

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html
RewriteRule ^ /path/to/subfolder/index.html [L]

For more information kindly follow the links mentioned below

Note: It would be more helpful if you read the Muffinman Article

React Router DOM - Not working in sub to subdomain

2 Answers2