React Router DOM - 在子域中不工作

Question

我必须构建我的第一个使用 react-router-dom

的 React 项目

是的，这是一个多页项目。

之后，运行构建命令我已经使用静态服务器成功测试了我的构建文件 - https://create-react-app.dev/docs/deployment/

注意：我已经检查了这些链接以将 React 应用程序部署到服务器

How to deploy a react app on cPanel?（关注这个）。
https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6
https://ridbay.medium.com/simple-steps-on-how-to-deploy-or-host-your-reactjs-app-in-cpanel-31cfbcad444e

但是，当我将项目上传到我的 CPanel 时，它会成功打开主要页面（https://test.com/react-project/ ) but did not serve other routing pages ( https://test.com/react-project/page2 --- 显示 404）。

App.js代码

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

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

{
  "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"
    ]
  }
}

更新：

点击了这些链接

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

并更新了 .htaccess 文件：

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

现在它不显示 404 错误，而是显示默认页面，但 URL。

例如：如果我输入 https://test.com/react-project/page2，URL 将是相同的，但它提供默认页面。

注意：我的应用程序托管在子域中

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

Answer 1

你好，你能从你的组件中删除 switch 并尝试这样吗

我的开发工作正常，.htaccess 规则是：

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

Answer 2

因此，在解决问题并搜索文章后，我得到了解决方案

App.js

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

.htaccess 文件

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]

如需更多信息，请点击以下链接

文章 - https://muffinman.io/blog/react-router-subfolder-on-server/
CRA 文件 - https://create-react-app.dev/docs/deployment/#building-for-relative-paths

注意：阅读Muffinman文章会更有帮助

React Router DOM - 在子域中不工作

React Router DOM - Not working in sub to subdomain

reactjs

.htaccess

react-router

cpanel

react-router-dom