reactjs - React-router 2.0 browserHistory doesn't work when refreshing

Question

Welcome To Ask or Share your Answers For Others

reactjs - React-router 2.0 browserHistory doesn't work when refreshing

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

reactjs - React-router 2.0 browserHistory doesn't work when refreshing

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').

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:14:45+0000

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..
  },

Categories

reactjs - React-router 2.0 browserHistory doesn't work when refreshing

reactjs - React-router 2.0 browserHistory doesn't work when refreshing

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags