reactjs Route Not Found 请求的 URL

Question

我正在使用 Apache 2.2 来托管我的 reactjs 应用程序……在我的 App.js 中，我有这个代码

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router,
        Route,
        Link,
        Switch,
        Redirect
 } from 'react-router-dom';
import Home from './components/Home';
import Cat from './components/Cat';

const NoMatch = ({ location }) => (
  <div>
        <h3>No match for <code>{location.pathname}</code> can be found.</h3>
  </div>
)

class App extends Component {
  render()
    return (
      <Router>
        <div>
          <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
          <Route exact path="/cat" component={Cat} />
          <Route component={NoMatch} />
        </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

然后我使用 npm run build 并将我的 build 文件夹中的所有内容移动到我的 DocumentRoot 文件夹 /var/www/html/home

在这个 /var/www/html/home 我也有一个 .htaccess 文件，我有

  RewriteEngine On
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]
  RewriteRule ^ ./index.html

当我去 /Home 时它很好，当我点击刷新时它就可以了。但后来我点击了一个链接，它把我带到了 /cat ，它又好了，但是当我刷新时它显示

Not Found 在此服务器上找不到请求的 URL /cat。

有没有人遇到过这个问题？我在网上看到很多关于解决问题的 .htaccess 文件，但它对我根本不起作用

Answer 1

我在服务器上遇到了同样的问题，运行 npm run build，用编译的项目创建一个文件夹，在 build 中创建 .htaccess 文件：

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html