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

Ответ 2 · рейтинг 154 · jmancherje

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

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

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

РЕДАКТИРОВАТЬ: см. Мой ответ здесь, чтобы подробнее узнать, почему это необходимо: https://stackoverflow.com/a/37622953/5217568

Ответ 3 · рейтинг 140 · BrahimS

Вы можете изменить свой .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>

Я использую react: "^16.12.0" и react-router: "^5.1.2". Этот метод является универсальным и, вероятно, является самым простым способом начать работу.

Ответ 4 · рейтинг 81 · user2875289

Для пользователей React Router V4:

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

<Router history={hashHistory} >

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

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

<HashRouter>
  <App/>
</HashRouter>

Ссылка: HashRouter

Ответ 5 · рейтинг 48 · Aidin

Я только что использовал приложение create-react-app для создания веб-сайта, и у меня возникла та же проблема, что и здесь. Я использую 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, и его можно найти здесь

Ответ 6 · рейтинг 35 · Efe Ariaroo

В свой index.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 - важная часть

Ответ 7 · рейтинг 32 · Todd

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

Когда вы используете компонент React Router Link, он блокирует навигацию браузера и вызывает transitionTo для выполнения навигации на стороне клиента. Вы используете 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-код на стороне сервера по мере необходимости.

Ответ 8 · рейтинг 27 · Colton Hicks

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

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

/*  /index.html  200

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

Ответ 9 · рейтинг 26 · th3morg

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

Эта проблема возникла из-за того, что CloudFront ответил сообщением 403 Access Denied, потому что ожидалось, что / some / other / path будет существовать в моей папке S3, но этот путь существует только внутри маршрутизации React с помощью response-router.

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

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

Ответ 10 · рейтинг 23 · Venkatesh Somu

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

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

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

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

Теперь создайте приложение с помощью команды

sudo npm run build

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

локальный / # / домашний локальный / # / aboutus

Решение 2. Без тега # с использованием browserHistory,

Установите в маршрутизаторе свой history = {browserHistory}. Теперь создайте его с помощью sudo npm run build.

Вам нужно создать файл conf, чтобы решить страницу 404 not found, файл 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 reload или перезапустить

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

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

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

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

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

Я надеюсь, что это поможет другим.

Ответ 11 · рейтинг 19 · Chtiwi Malek

Если вы размещаете свое приложение для реагирования на 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 и не использовать историю хеширования.

Ответ 12 · рейтинг 17 · sree

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

response-router- руководство