部署后 React BrowserRouter 路由不起作用

Question

我有一个简单的网站，并且有 2 个离线工作的链接，但如果我将其部署并上传到网站上，那么第一页工作正常，但是当我点击添加链接时，它给了我 404 和列表链接工作正常，两个链接离线工作正常

<a href="/react/">List</a>
<a href="/react/Add">Add</a>

路由器文件

ReactDOM.render(
  <BrowserRouter>
    <Route path="/react/" exact component={List}/>
    <Route path="/react/Add" exact component={Add}/>
  </BrowserRouter>,
  document.getElementById('root')
);

包.json

{
    "name": "axios1",
    "version": "0.1.0",
    "homepage":"http://aroratour.com/react/",

Answer 1

您已将项目部署在名为react 的子文件夹中。您需要将basename 添加到您的BrowserRouter 并需要从您的Route's 路径中删除/react，

<BrowserRouter basename="/react">
    <Switch> // Switch return the first matching Route
      <Route path="/" exact component={List}/>
      <Route path="/Add" exact component={Add}/>
    </Switch>
</BrowserRouter>

注意：确保添加.htaccess文件。

如果您的项目中有任何Link，则不应在路径中包含/react。

例如，要使用Link 导航到/Add，您应该有，

<Link to="/Add"> Add </Link>

这将在内部转换为，

<a href="/react/Add"> Add </a>   //React will automatically add `/react` from basename in BrowserRouter

---

更新

这个.htaccess 内容适合我，

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]

Answer 2

您需要再添加一件事，同时使用“切换”和“确切路径”而不是“路径”

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter basename="/react">
    <Switch>
       <Route exact path="/"  component={List}/>
       <Route exact path="/Add"  component={Add}/>
    </Switch>

</BrowserRouter>,
document.getElementById('root')
);

Answer 3

当你部署时，你必须添加.htaccess 来阻止所有路由请求到 index.html 页面。 使用以下代码在 dist 文件夹中创建 .htaccess。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>