时间戳

首页 > 解决方案 > 部署后 React BrowserRouter 路由不起作用

reactjs - 部署后 React BrowserRouter 路由不起作用

问题描述

我有一个简单的网站，并且有 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/",

标签： reactjshyperlinkroutes

解决方案

由于您已将项目部署在名为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在路径中。

例如，要导航到/Addusing 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]

推荐阅读