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

Question

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

我的 app.jsx 文件是：

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;

我的history.js是

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

它工作正常，但在刷新时它显示 error.Please 提示我我做错了什么。

错误

Cannot GET /routeName

Answer 1

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

Answer 2

安装 webpack-cli 以在刷新时启用回退到您的应用程序。

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

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

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

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

why on refresh react router is not working?

reactjs

react-router-v4

react-router-dom