时间戳

首页 > 解决方案 > 为什么刷新反应路由器不起作用？

reactjs - 为什么刷新反应路由器不起作用？

问题描述

我是新手，我正在使用 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();

它工作正常，但刷新时显示错误。请告诉我我做错了什么。

错误

无法获取 /routeName

标签： reactjsreact-router-v4react-router-dom

解决方案

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

然后添加--history-api-fallback你的开发脚本：

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

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

推荐阅读