URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

Ответы здесь очень полезны, для меня работала настройка сервера Webpack на ожидаемые маршруты.

  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },

HistoryApiFallback - это то, что исправило эту проблему для меня. Теперь маршрутизация работает правильно, и я могу обновить страницу или ввести URL-адрес напрямую. Не нужно беспокоиться о работе на сервере node. Этот ответ, очевидно, работает только в том случае, если вы используете webpack.

ИЗМЕНИТЬ: см. мой ответ здесь для более подробной причины, почему это необходимо: https://stackoverflow.com/questions/36857147/react-router-2-0-browserhistory-doesnt-work-when-refreshing

Для React Router V4 Пользователи:

Если вы попытаетесь решить эту проблему с помощью техники Hash History, упомянутой в других ответах, обратите внимание, что

<Router history={hashHistory} >

не работает в V4, вместо этого используйте HashRouter:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

Ссылка: https://reacttraining.com/react-router/web/api/HashRouter

Вы можете изменить htaccess и вставить это:

RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Я использую react: "^15.3.2", react-router: "^3.0.0", history: "^4.3.0",

Маршрутизатор можно вызывать двумя разными способами, в зависимости от того, происходит ли навигация на клиенте или на сервере. Он настроен для работы на стороне клиента. Ключевым параметром является второй метод , расположение.

Когда вы используете компонент React Router Link, он блокирует навигацию браузера и вызывает переход для выполнения клиентской навигации. Вы используете HistoryLocation, поэтому он использует API истории HTML5 для завершения иллюзии навигации, моделируя новый URL-адрес в адресной строке. Если вы используете старые браузеры, это не сработает. Вам нужно будет использовать компонент HashLocation.

Когда вы нажмете обновление, вы обойдете весь код React и React Router. Сервер получает запрос для /joblist, и он должен что-то вернуть. На сервере вам необходимо передать путь, который был запрошен методу run, чтобы он отображал правильный вид. Вы можете использовать ту же карту маршрутов, но вам, вероятно, потребуется другой вызов Router.run. Как указывает Чарльз, вы можете использовать переписывание URL, чтобы справиться с этим. Другой вариант - использовать сервер node.js для обработки всех запросов и передать значение пути в качестве аргумента местоположения.

В экспресс, например, он может выглядеть следующим образом:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

Обратите внимание, что путь запроса передается на run. Для этого вам понадобится серверный механизм просмотра, с помощью которого вы можете передать отображаемый HTML. Существует ряд других соображений, использующих renderToString и при запуске React на сервере. После того, как страница будет отображаться на сервере, когда ваше приложение загрузится на клиенте, оно снова отобразится, при необходимости обновив HTML-версию на стороне сервера.

В head.html head добавьте следующее:

<base href="/">
<!-- This must come before the css and javascripts -->

Затем при работе с сервером webpack dev используйте эту команду.

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

--history-api-fallback - важная часть

У сервера Webpack Dev есть возможность включить это. Откройте package.json и добавьте --history-api-fallback. Эти решения работали для меня.

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls#configuring-your-server

Если вы принимаете приложение-ответ через AWS Static S3 Hosting & CloudFront

Эта проблема представила CloudFront, ответив сообщением об отказе в доступе 403, потому что он ожидал /some/other/path для существования в моей папке S3, но этот путь существует только внутри React routing с реактивным маршрутизатором.

Решение состояло в том, чтобы настроить правило Error Pages. Перейдите в настройки CloudFront и выберите свой дистрибутив. Затем перейдите на вкладку "Страницы ошибок". Нажмите "Создать пользовательский ответ об ошибке" и добавьте запись для 403, так как это код состояния ошибки, который мы получаем. Задайте путь страницы ответа в /index.html и код состояния до 200. Конечный результат удивляет меня своей простотой. Страница индексирования обслуживается, но URL-адрес сохраняется в браузере, поэтому, как только приложение реагирует на загрузку, он обнаруживает путь URL-адреса и переходит на нужный маршрут.

Ошибка страницы 403 Правило

Это может решить вашу проблему.

Я также столкнулся с той же проблемой в приложении ReactJS в режиме "Производство". Вот 2 решение проблемы.

1.Измените историю маршрутизации на "hashHistory" вместо имени браузера вместо

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

Теперь создайте приложение, используя команду

sudo npm run build

Затем поместите папку сборки в папку var/www/Now. Теперь приложение работает нормально с добавлением # тега в каждом URL-адресе. как

локальный/#/дома  локальный /#/ABOUTUS

Решение 2: Без тега #, использующего browserHistory,

Задайте свою историю = {browserHistory} в своем маршрутизаторе, теперь создайте ее, используя sudo npm run build.

Вам нужно создать файл "conf", чтобы решить 404 не найденную страницу, файл conf должен быть таким.

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

cd/etc/apache2/sites-available Ls nano sample.conf Добавьте в него содержимое ниже.

 <VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Теперь вам нужно включить файл sample.conf, используя следующую команду

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

то он попросит вас перезагрузить сервер Apache, используя    sudo service apache2 перезагрузите или перезапустите

затем откройте папку localhost/build и добавьте файл .htaccess с содержимым ниже.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Теперь приложение работает нормально.

Примечание: измените 0.0.0.0 ip на локальный IP-адрес.

Если какие-либо сомнения относительно этого, не стесняйтесь поднимать комментарий.

Я надеюсь, что это будет полезно для других.

Я использовал приложение create-react-app для создания веб-сайта только сейчас и имел ту же самую проблему, представленную здесь. Я использую BrowserRouting из BrowserRouting react-router-dom. Я работаю на сервере Nginx, и для меня это решило добавить следующее: /etc/nginx/yourconfig.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

Что соответствует добавлению следующего в .htaccess в случае, если вы используете Appache

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Это также похоже на решение, предложенное самим Facebook, и его можно найти здесь

Попробуйте добавить файл ".htaccess" в общую папку с приведенным ниже кодом.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]  

добавьте это в webpack.congif.js

devServer: {
      historyApiFallback: true
  }

Производственный стек: React, React Router v4, BrowswerRouter, Express, Nginx

1) User BrowserRouter для симпатичных URL-адресов

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2) Добавьте index.html ко всем неизвестным запросам с помощью /*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3) пакетный webpack -p пакет с webpack -p

4) запустите nodemon server.js или node server.js

EDIT: вы можете позволить nginx обрабатывать это в блоке сервера и игнорировать шаг 2:

location / {
    try_files $uri /index.html;
}

Если вы используете приложение Create React:

Там есть большая прогулка по этой проблеме с решениями для многих крупных платформ хостинга, которые вы можете найти ЗДЕСЬ на странице Создать приложение React. Например, я использую React Router v4 и Netlify для моего внешнего кода. Все, что нужно, это добавить 1 файл в мою общую папку ( "_redirects" ) и одну строку кода в этом файле:

/*  /index.html  200

Теперь мой сайт правильно отображает пути, такие как mysite.com/pricing, когда они введены в браузер или когда кто-то обращается к обновлению.

Если вы размещаете свое приложение-ответ в IIS, просто добавьте файл web.config, содержащий:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Это означает, что сервер IIS вернет основную страницу клиенту вместо ошибки 404 и не будет необходимости использовать историю хэша.

Эта тема немного устарела и решена, но я хотел бы предложить вам простое, ясное и лучшее решение. Он работает, если вы используете веб-сервер.

Каждый веб-сервер имеет возможность перенаправлять пользователя на страницу с ошибкой в ​​случае http 404. Для решения этой проблемы вам необходимо перенаправить пользователя на страницу индекса.

Если вы используете базовый сервер Java (tomcat или любой сервер приложений Java), решение может быть следующим:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

Пример:

• GET http://example.com/about
• Веб-сервер выбрасывает http 404, потому что эта страница не существует на стороне сервера.
• Конфигурация страницы ошибки сообщает серверу, который отправляет страницу index.jsp обратно пользователю
• тогда JS выполнит оставшуюся часть задания со стороны clien, потому что URL-адрес на стороне клиента по-прежнему http://example.com/about.

То есть, больше не нужно магии:)

Я пока не использую рендеринг на стороне сервера, но я сталкиваюсь с той же проблемой, что и OP, где ссылка, похоже, работает нормально большую часть времени, но не удалась, когда у меня был параметр. Я запишу свое решение здесь, чтобы узнать, помогает ли это кому-либо.

Мой главный jsx содержит следующее:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

Это отлично подходит для первой сопоставленной ссылки, но когда идентификатор: id изменяется в выражениях <Link>, вложенных в эту страницу подробностей модели, url изменяется в строке браузера, но содержимое страницы не изначально менялось, чтобы отразить связанный модель.

Проблема заключалась в том, что я использовал props.params.id для установки модели в componentDidMount. Компонент просто монтируется один раз, так что это означает, что первая модель является той, которая хранится на странице, а последующие ссылки меняют реквизиты, но оставляют страницу неизменной.

Установка модели в состоянии компонента как в componentDidMount, так и в componentWillReceiveProps (где она основана на следующих реквизитах) решает проблему, а содержимое страницы изменяется, чтобы отобразить желаемую модель.

Если у вас есть резерв на ваш index.html, убедитесь, что в вашем файле index.html есть следующее:

<script>
  System.config({ baseURL: '/' });
</script>

Это может отличаться от проекта к проекту.

Если вы используете Express или какую-либо другую структуру в бэкэнд, вы можете добавить аналогичную конфигурацию, как показано ниже, и проверить общедоступный путь Webpack в конфигурации, она должна работать нормально даже при перезагрузке, если вы используете BrowserRouter

' expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
  });'

Я использую WebPack, у меня была такая же проблема Решение => В вашем файле server.js

const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    // res.end();
  });

https://github.com/ReactTraining/react-router/blob/master/FAQ.md#why-doesnt-my-application-render-after-refreshing

Полный маршрутизатор с примером (React Router v4):

Пример рабочего примера Проверьте проект ниже.

https://github.com/eh3rrera/react-router-4-example

После загрузки
1.) "npm install" в cmd для установки проекта
2.) "npm start", чтобы запустить приложение реакции

Примечание: вам нужно программное обеспечение Node js для запуска в ваших окнах. Mac OS имеет узел по умолчанию.

ура

Я нашел решение для моего SPA с реагирующим маршрутизатором (Apache). Просто добавьте в .htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

источник: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

Исправление ошибки "невозможно получить /URL" при обновлении или при непосредственном вызове URL.

Сконфигурируйте ваш webpack.config.js так, чтобы он ожидал, что по данной ссылке маршруты будут такими.

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
    },

Мне нравится этот способ обработки. Попробуйте добавить: yourSPAPageRoute/* на стороне сервера, чтобы избавиться от этой проблемы.

Я пошел с этим подходом, потому что даже собственный API истории HTML5 не поддерживает правильное перенаправление при обновлении страницы (насколько я знаю).

Примечание. Выбранный ответ уже рассмотрел это, но я стараюсь быть более конкретным.

Экспресс-маршрут

Протестировано и просто хотел поделиться этим.

Надеюсь, поможет.

Комментарий -jimbotron помог мне, проблема была.htaccess

"Это ссылка, которая помогла решить мою проблему: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client -side-routing - jimbotron '

Если вы используете firebase, все, что вам нужно сделать, это убедиться, что у вас есть свойство rewrites в вашем файле firebase.json в корне вашего приложения (в разделе хостинга).

Например:

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

Надеюсь, это избавит кого-то еще от разочарования и впустую.

Счастливое кодирование...

Дальнейшее чтение по теме:

https://firebase.google.com/docs/hosting/full-config#rewrites

Firebase CLI: "Настроить как одностраничное приложение (переписать все URL-адреса в /index.html)"

Для тех, кто использует IIS 10, это то, что вы должны сделать, чтобы сделать это правильно. Убедитесь, что вы используете browserHistory с этим. Что касается ссылки, я дам код для маршрутизации, но это не имеет значения, что важно для следующего шага после кода компонента ниже:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

Поскольку проблема заключается в том, что IIS получает запрос от клиентских браузеров, он будет интерпретировать URL-адрес так, как будто он запрашивает страницу, а затем возвращает страницу 404, так как нет доступной страницы. Выполните следующие действия:

1. Открыть IIS
2. Разверните сервер, затем откройте папку "Сайты"
3. Нажмите веб-сайт/приложение
4. Перейдите на страницу ошибок
5. Откройте элемент статуса ошибки 404 в списке
6. Вместо опции "Вставить содержимое из статического файла в ответ на ошибку" измените его на "Выполнить URL-адрес на этом сайте" и добавьте "/" значение косой черты в URL-адрес.

И теперь он будет работать нормально.

Я надеюсь, что это помогает. :-)

Его довольно простой, когда вы получили, не может получить ошибку 403 после обновления компонента dom. просто добавьте эту строку в конфигурацию вашего веб-пакета, 'historyApiFallback: true'. это спасет весь мой день.

Здесь есть много хороших ответов, и здесь не нужно писать больше ответов.

но, я предоставляю еще одну хорошую ссылку здесь

https://css-tricks.com/learning-react-router/#article-header-id-9

В случае, если кто-то ищет решение для React JS SPA с Laravel. Принятый ответ - лучшее объяснение того, почему такие проблемы происходят. Как уже объяснялось, вам необходимо настроить как клиентскую, так и серверную сторону. В свой шаблон клипа включите файл js в комплекте, обязательно используйте URL facade, как этот

<script src="{{ URL::to('js/user/spa.js') }}"></script>

В ваших маршрутах обязательно добавьте это в основную конечную точку, где находится шаблон клинка. Например,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

Вышеприведенное является основной конечной точкой для шаблона клинка. Теперь добавьте необязательный маршрут,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

Проблема заключается в том, что сначала загружается шаблон клинка, а затем реагирует маршрутизатор. Итак, когда вы загружаете '/setting-alerts', он загружает html и js. Но когда вы загружаете '/setting-alerts/about', он сначала загружается со стороны сервера. Поскольку на стороне сервера в этом месте ничего нет, он не возвращается. Когда у вас есть этот дополнительный маршрутизатор, он загружает ту же страницу и также загружает маршрутизатор, а затем реагирует загрузчик, решает, какой компонент будет отображаться. Надеюсь, это поможет.

Решение для Preact с preact-router

Работает с обновлением и прямым доступом

Для тех, кто обнаруживает это через Google, вот демо истории preact-router + hash:

const { h, Component, render } = preact; /** @jsx h */
const { Router } = preactRouter;
const { createHashHistory } = History;
const App = () => (
    <div>
        <AddressBar />

        <Router history={createHashHistory()}>
            <div path="/">
                <p>
                    all paths in preact-router are still /normal/urls.
                    using hash history rewrites them to /#/hash/urls
                </p>
                Example: <a href="/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

https://jsfiddle.net/developit/gLyL6rbn/

У меня была такая же проблема, и это решение работало для нас..

Фон:

Мы размещаем несколько приложений на одном сервере. Когда мы обновим сервер, вы не поймете, где искать наш индекс в папке dist для этого конкретного приложения. Вышеупомянутая ссылка приведет вас к тому, что сработало для нас... Надеюсь, это поможет, поскольку мы потратили немало времени на разработку решения для наших нужд.

Мы используем:

package.json

"dependencies": {
"babel-polyfill": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-persist": "^4.6.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.4.1"
}

my webpack.config.js

webpack.config.js

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

my index.js

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
// persistStore(store).purge()


ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

my app.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
// app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/*', function (req, res) {
    res.render('index');
});

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

Если вы размещаете в IIS; Добавление этого в мой webconfig решило мою проблему

    <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
        <remove statusCode="500" subStatusCode="100" />
        <remove statusCode="500" subStatusCode="-1" />
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
        <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
        <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
    </httpErrors>

Вы можете сделать аналогичную конфигурацию для любого другого сервера

Практическое обходное решение:

• Дублировать и переименовывать исходный файл html в качестве joblist.html
• Использовать joblist.html в качестве маршрута пути

Не требуется никаких изменений на стороне сервера.