个人中心
gpt4 book ai didi

reactjs - React-router 2.0 browserHistory 刷新时不起作用

转载 作者：行者123 更新时间：2023-12-03 13:28:01 25 4
gpt4 key购买 nike

刷新页面http://localhost/about时，以下代码报告404未找到。但如果把 browserHistory 改成 hashHistory 就可以了。

这是我的 js 文件。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';

class App extends Component {
  render() {
    return (
      <div>
        <h1>APP!</h1>
        <Link to="/about">/about</Link>
        {this.props.children}
      </div>
    )
  }
}

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About 33</h2>
      </div>
    )
  }
}

var routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App} />
        <Route path="/about" component={About} />
        <Route path="/wealth" component={WealthExpectation} />
    </Router>
)

$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});

还有 html 文件。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
        <script type="text/javascript" src="/static/js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript" src="/static/js/script.js"></script>
        <!-- build:css -->
          <link rel="stylesheet" type="text/css" href="/static/bower_modules/c3/c3.min.css">
        <!-- endbuild -->
    </head>
    <body>
        <div id="hello">a</div>
        <div id="world"></div>
    </body>
</html>

我已阅读 react-router v2.0 browserHistory not working 上的问题和 React-router urls don't work when refreshing or writting manually 。对于第一个，我已经将路径设置为绝对路径，但仍然不起作用。对于第二个，我尝试导入express但失败了(“未捕获的类型错误:无法读取未定义的属性“原型(prototype)””)。

最佳答案

为了扩展 Phi Nguyen 的答案，hashHistory 有效而 browserHistory 失败的原因是因为 hashHistory 是一种“黑客”或解决方法，允许您的应用在浏览器不注意并发送 GET 的情况下操作 URL > 向您的服务器发出请求。基本上哈希值之后的所有内容都会被忽略。

browserHistory 通常是首选，因为它看起来更好，但您不再获得哈希解决方法，并且您需要其他方法来阻止浏览器尝试向服务器发送请求。如果您使用 webpack，有一种简单的方法可以使所有请求基本上回退到单个请求。例如:

GET 至 http://localhost:8080/和 GET 到 http://localhost:8080/about都会回退到 http://localhost:8080/而react-router会处理/about。 (这就是您能够正常导航到/about 的原因，但是如果刷新，您会收到 404 错误，您将向/about 发送 GET ，这不会您的服务器上不存在)

要做到这一点，你需要实现一个名为history apifallback的webpack功能。有两种方法可以做到这一点。

从react-router文档/教程中，您可以将start脚本设置为如下所示:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

其中 --history-api-fallback 对于出现此错误的任何人来说都是重要的部分。

或者您可以更改您的 webpack.config.js 文件以在您的开发服务器上处理此问题。

  devServer: {
    historyApiFallback: true,
    ...other stuff..
  },

关于reactjs - React-router 2.0 browserHistory 刷新时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36857147/

25 4 0
文章推荐： reactjs - React Router V4 使用 Material UI 在 ListItem 内实现 NavLink
文章推荐： reactjs - 如何重置 react 原生动画？
文章推荐： reactjs - 是否可以从组件外部触发 Redux 操作？
文章推荐： reactjs - React - 无法读取 null 的属性 'setState'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com