React-router 2.0 browserHistory 在刷新时不起作用 [英] React-router 2.0 browserHistory doesn't work when refreshing

查看：30
本文介绍了React-router 2.0 browserHistory 在刷新时不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

刷新页面 http://localhost/about 时，以下代码报告 404 not found.但是如果将 browserHistory 改成 hashHistory 就可以了.

这是我的 js 文件.

import React, {Component} from 'react';从 'react-dom' 导入 ReactDOM；import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';从'jquery'导入$；类 App 扩展组件 {使成为() {返回 (<div><h1>APP!</h1><Link to="/about">/about</Link>{this.props.children}

)}}class 关于扩展 React.Component {使成为() {返回 (<div><h2>大约33/h2>

)}}无功路线 = (<路由器历史={hashHistory}><Route path="/" component={App}/><Route path="/about" component={About}/><Route path="/wealth" component={WealthExpectation}/></路由器>)$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});

还有 html 文件.

<头><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 --><身体><div id="你好">a</div><div id="世界"></div>

我已经阅读了关于 react-router v2.0 browserHistory 的问题工作和反应路由器网址不手动刷新或写入时不起作用.对于第一个，我已经将路径设置为绝对路径，但仍然无法正常工作.对于第二个，我尝试导入 express 但失败了('Uncaught TypeError: Cannot read property 'prototype' of undefined').

解决方案

为了扩展 Phi Nguyen 的回答，hashHistory 有效而 browserHistory 失败的原因是因为 hashHistory 是一种黑客"或解决方法，允许您的应用操纵 URL浏览器不会注意到并向您的服务器发送 GET 请求.基本上忽略哈希之后的所有内容.

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

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

为此，您需要实现一个名为 history api fallback 的 webpack 功能.有两种方法可以做到这一点.

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

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

其中 --history-api-fallback 对任何有此错误的人来说都很重要.

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

 开发服务器:{historyApiFallback: 真,...其他的东西..},

Below codes report 404 not found when refreshing on page http://localhost/about. But if browserHistory is changed to hashHistory, it works fine.

Here are my js file.

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"))});

And the html file.

<!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>

I've read the questions on react-router v2.0 browserHistory not working and React-router urls don't work when refreshing or writting manually. For the first one, I've already set the path to absolute path, but still not working. For the second one, I tried to import express but failed ('Uncaught TypeError: Cannot read property 'prototype' of undefined').

解决方案

To expand on Phi Nguyen's answer the reason hashHistory works and browserHistory fails is because hashHistory is sort of a 'hack' or workaround to allow your app to manipulate the URL without the browser noticing and sending a GET request to your server. Essentially everything after the Hash is ignored.

browserHistory is generally preferred because it looks better but you no longer get the hash workaround and you need other means of preventing your browser from trying to send requests to your server. IF you are using webpack there is a simple way to essentially make all requests fallback to a single request. For example:

GET to http://localhost:8080/ AND a GET to http://localhost:8080/about would both fallback to http://localhost:8080/ and react-router would deal with the /about. (this is the reason you are able to navigate to /about fine, but if you refresh you get a 404 error, you're sending a GET to /about which doesn't exist on your server)

To do this you need to implement a webpack feature called history api fallback. There's two ways of doing that.

From the react-router docs / tutorial you can setup your start script to look like this:

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

Where the --history-api-fallback is the important piece for anyone with this error.

OR you can change your webpack.config.js file to look handle this on your dev server.

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

这篇关于React-router 2.0 browserHistory 在刷新时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆