Question

我是个新手，我正在使用react-router-dom在应用程序中进行路由。

我的app.jsx文件是：

$(CC)

我的history.js是

import React from "react";
import Home from "./Home";
import { Router, Route, Link } from "react-router-dom";
import { history } from './history';

class App extends React.Component {
  constructor(props) {
    super(props);
    const { dispatch } = this.props;
    history.listen((location, action) => {
    });
  }
  render(){
    return(
      <div className="row mt-5">
        <Router history={history}>
          <div>
            <ul>
              <li>
                <Link to="/Home">Home</Link>
              </li>
            </ul>
            <hr />
            <Route exact path="/Home" component={Home} />
          </div>
        </Router>
      </div>
    );
  };
};
export default App;

它工作正常，但刷新后显示错误。请建议我我做错了。

错误

无法获取/ routeName

Answer 1

安装webpack-cli以在刷新时为您的应用启用后备功能。

然后在您的开发脚本中添加--history-api-fallback：

"dev": "webpack-dev-server --config ./webpack.config.js --hot --history-api-fallback"

我写了开发脚本只是为了澄清事情。

Answer 2

这不是一个与反应有关的问题，而是一个服务器问题。如果您使用的是webpack服务器-请参见historyApiFallback参数，否则请设置服务器以将所有请求重定向到索引页

为什么在刷新反应路由器不工作？

2 个答案: