reactjs找不到路由请求的URL

时间:2019-03-29 19:20:59

标签: reactjs apache .htaccess routes refresh

我正在使用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,也很好,但是当我刷新时显示

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

有人遇到这个问题吗?我在网上看到很多有关.htaccess文件的信息,但该文件对我没有任何作用

1 个答案:

答案 0 :(得分:0)

我在服务器上遇到了同样的问题,运行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