React-router 2.0 browserHistory не работает при обновлении

Отчет о нижестоящих кодах 404 не найден при обновлении на странице http://localhost/about. Но если 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>

Я прочитал вопросы о реакции-маршрутизаторе v2.0 browserHistory не работает и React-router urls don ' t при обновлении вручную или вручную. Для первого я уже установил путь к абсолютному пути, но все еще не работал. Для второго я попытался импортировать экспресс, но не удалось ( "Uncaught TypeError: Невозможно прочитать свойство 'prototype' of undefined" ).

Ответ 1

Чтобы расшифровать Phi Nguyen, ответьте на причину, по которой hashHistory работает, и ошибка браузера невозможна, потому что hashHistory - это своего рода "взлом" или обходной путь, позволяющий вашему приложению манипулировать URL-адресом без уведомления обозревателя и отправки запроса GET на ваш сервер, По сути, все после того, как Hash игнорируется.

browserHistory обычно предпочтительнее, потому что он выглядит лучше, но вы больше не получаете хеш-образную обработку, и вам нужны другие средства, чтобы ваш браузер не пытался отправлять запросы на ваш сервер. ЕСЛИ вы используете webpack, есть простой способ существенно сократить все запросы к одному запросу. Например:

GET to http://localhost:8080/ И a GET to http://localhost:8080/about оба отказались бы от http://localhost:8080/, а реакция-маршрутизатор будет иметь дело с /about. (это причина, по которой вы можете перемещаться в/о штрафах, но если вы обновляете, вы получаете ошибку 404, вы отправляете GET в/о котором не существует на вашем сервере)

Для этого вам нужно реализовать функцию webpack, называемую резервной копией истории api. Есть два способа сделать это.

В интерактивном документе/учебнике по реагированию вы можете настроить start script следующим образом:

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

Где -history-api-fallback является важной частью для всех, у кого есть эта ошибка.

ИЛИ вы можете изменить свой файл webpack.config.js, чтобы посмотреть его обработчик на своем dev-сервере.

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

Ответ 2

Альтернативный, простой и недорогой подход заключается в том, чтобы сделать Apache для любого запроса в ваше приложение React. Например: http://localhost/about идет внутренне через http://localhost/[my-own-html-file.html]

Например, если наше приложение React начинается с index.html, вам необходимо создать файл .htaccess в вашем приложении React и вставить следующий код:

# Map all non-existing URLs to be processed by index.html,
# so any URL that doesn't point to a JS file, CSS file, etc etc...
# goes through my React app.

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.html [L]
</IfModule>

Кстати, этот код HTACCESS был адаптирован из Drupal 8: https://github.com/drupal/drupal/blob/8.2.x/.htaccess

Ответ 3

Когда вы используете browser history, сервер не знает, как обрабатывать URL-адрес, который был изменен только в браузере. Этот tutorial расскажет вам, как удалить # в url и сделать работу browser history.

Ответ 4

Для использования browserHistory вам необходимо реализовать экспресс-сервер для обработки реальных URL-адресов. hashHistory не нуждается в экспресс-сервере.

Посмотрите на следующее руководство:

https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md