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')
);

Package.json

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

Answer 1

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

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

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

<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

部署时，必须将.htaccess添加到hendal，并将所有路由请求添加到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>

Answer 3

您还需要添加一件事，同时使用“ Switch”和“ exact path”而不是“ path”

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')
);

部署后，React BrowserRouter路由不起作用

3 个答案: