React Router DOM - 不在子域中工作答案

【问题标题】：React Router DOM - Not working in sub to subdomainReact Router DOM - 不在子域中工作
【发布时间】：2021-10-19 02:01:53
【问题描述】：

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

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

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

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

但是，当我将项目上传到我的 CPanel 时，它会成功打开主页（https://test.com/react-project/），但没有提供其他路由页面（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"
    ]
  }
}

更新：

关注了这些链接

并更新了.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/

【问题讨论】：

标签： reactjs .htaccess react-router cpanel react-router-dom

【解决方案1】：

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

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文章会更有帮助

【讨论】：

【解决方案2】：

您好，您可以从组件中删除 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>

【讨论】：

它没有工作，因为现在它完全删除了空白页的输出
如果我删除确切的关键字它可以工作，但与以前的问题相同