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

Например, я в localhost/joblist и все хорошо, потому что я приехал сюда, нажав на ссылку. Но если я обновляю веб-страницу, то получаю:

Cannot GET /joblist

По умолчанию это не сработало так. Изначально у меня был URL-адрес localhost/#/ и localhost/#/joblist, и они работали отлично. Но мне не нравится этот вид URL, поэтому попытка стереть это #, Я написал:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

Эта проблема не возникает с localhost/, этот всегда возвращает то, что я хочу.

Мы только что выпустили Это приложение одностраничное, поэтому /joblist не нужно ничего запрашивать на каком-либо сервере.

EDIT2: Весь мой маршрутизатор.

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

Просмотр комментариев к принятому ответу и общего характера этого вопрос («не работает»), я подумал, что это может быть хорошим местом для некоторых общих объяснений проблем, связанных с этим. Таким образом, этот ответ предназначен в качестве справочной информации / разработки по конкретному варианту использования ОП. Пожалуйста, потерпите меня.

На стороне сервера и на стороне клиента

первой большой вещи чтобы понять это, нужно сказать, что теперь есть 2 места, где URL интерпретируется, тогда как раньше было «1» в «старые времена». В прошлом, когда жизнь была проста, какой-то пользователь отправлял запрос для http://example.com/about на сервере, который проверил часть пути URL-адреса, определил, что пользователь запрашивает страницу о программе, а затем отправил ее обратно.

С маршрутизацией на стороне клиента, которую предоставляет React-Router, все не так просто. Во-первых, у клиента еще нет загруженного кода JS. Так что самый первый запрос всегда будет на сервер. Затем будет возвращена страница, которая содержит необходимые теги сценариев для загрузки React, React Router и т. Д. Только после загрузки этих сценариев начинается фаза 2. На этапе 2, когда пользователь нажимает, например, на навигационную ссылку «О нас», URL-адрес изменяется локально только http://example.com/about. Обратите внимание, что я мог бы использовать обычный тег Modernizr ), но запрос к серверу не сделан. Вместо этого React Router делает свое дело на стороне клиента, определяет, какое представление React отображать, и отображает его. Предполагая, что вашей странице about не нужно совершать какие-либо вызовы REST, это уже сделано. Вы перешли из дома в О нас без каких-либо запросов к серверу.

действительно слился без обновления страницы , что, в свою очередь, заставляет React Router выполнять переход страницы на стороне клиента Глядя на вывод

Но теперь подумайте, что произойдет, если скопировать и вставить URL-адрес в адресную строку и отправить его другу по электронной почте. Ваш друг еще не загрузил ваш сайт. Другими словами, она все еще находится в фазе 1 . На ее компьютере еще не запущен React Router. Поэтому ее браузер создаст запрос к серверу http://example.com/about Глядя на вывод

И вот тут начинается ваша проблема. До сих пор вы могли бы просто разместить статический HTML в корне вашего сервера. Но это дало бы 404 ошибки для всех других URL-адресов при запросе от серверного значения . Те же URL-адреса работают нормально на стороне клиента , потому что там React Router выполняет маршрутизацию за вас, но они терпят неудачу на стороне сервера , если вы не заставите свой сервер их понимать.

объединения серверной и клиентской маршрутизации в теле функции .

Не было случая, чтобы это не делало работу. http://example.com/about URL для работы с обоими на стороне сервера и на стороне клиента вам необходимо настроить маршруты как на стороне сервера, так и на стороне клиента. Имеет смысл правильно?

Dojo.hitch ()

Глядя на вывод

: отсутствие значения для переменной ;

2 — это число цифр, до которого мы хотим округлить это число. , ваш URL для страницы about будет выглядеть примерно так s: вывод будет: История браузера и отправляет страницу индекса, как и ожидалось. React-Router подберет http://example.com/#/about смотрите здесь: #: 805,322 http://example.com/ ‘некрасивые’ URL #/about возвращает

Недостатки :

  • При таком подходе рендеринг на стороне сервера невозможен. Что касается поисковой оптимизации (SEO), ваш сайт состоит из одной страницы, на которой почти нет контента.
  • При таком подходе вы используете историю браузеров, но просто настраиваете всеобъемлющую проверку на сервере, который отправляет

Глядя на вывод

Catch-all

, изменилось так? /*index.html Сложнее настроить

Недостатки :

  • По-прежнему нет хорошего SEO
  • # 456

Глядя на вывод

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

Он отображается внутри адресной строки, но я не могу поймать его с помощью JavaScript.

Недостатки :

  • Отправьте перенаправление javascript обратно вызывающему клиенту, по сути, повторно вызывая страницу генератора. ПРИМЕЧАНИЕ: это вызовет событие onload в IE, потому что оно действует как обычная страница.
  • (Вы можете использовать разделенный пробелами список для применения нескольких классов.)
  • SEO

Глядя на вывод

то же самое

Я потратил несколько часов на эту проблему и не нашел лучшего подхода, но: то же самое JS код на обоих концах? Теперь у нас есть все наши маршруты, определенные в одной конфигурации реакции-маршрутизатора, и нам не нужно дублировать наш код рендеринга. Это, так сказать, «Святой Грааль». Сервер отправляет ту же самую разметку, которую мы получили бы в случае перехода страницы на клиенте. Это решение является оптимальным с точки зрения SEO.

Недостатки :

  • Сервер должен (уметь) запускать JS. Я экспериментировал с Java i.c.w. Нашорн, но это не работает для меня. На практике это в основном означает, что вы должны использовать сервер на базе Node JS.
  • , используемого переменной window на стороне сервера и т. д.)
  • Крутая кривая обучения

Глядя на вывод

Что мне использовать?

Выберите ту, с которой вы можете справиться. Лично я думаю, что все достаточно просто настроить, так что это мой минимум. Эта настройка позволяет вам улучшать вещи с течением времени. Если вы уже используете Node JS в качестве серверной платформы, я бы определенно занялся созданием изоморфного приложения. Да, сначала это сложно, но как только вы освоитесь, это на самом деле очень элегантное решение проблемы.

Так что для меня это будет решающий фактор. Если мой сервер работает на Node JS, я бы стал изоморфным ;, в противном случае я бы выбрал решение Catch-all и просто расширил его (Гибридное решение) по мере того, как время прогрессирует и требования SEO требуют этого.

Если вы хотите узнать больше об изоморфном (также называемом «универсальным») рендеринге с помощью React, есть несколько хороших руководств по subject:

. Кроме того, для начала я рекомендую взглянуть на некоторые стартовые наборы. Выберите тот, который соответствует вашему выбору для технологического стека (помните, React — это просто V в MVC, вам нужно больше вещей для создания полноценного приложения). Начнем с просмотра того, что было опубликовано самим Facebook:

Или выберите один из множества сообществ. Теперь есть хороший сайт, который пытается проиндексировать все из них:

Я начал с них:

javascript

использовать Internet Explorer. Если HTTP-запрос прерван

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

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

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

JavaScript Framework и библиотеки https://stackoverflow.com/a/37622953/5217568

Для React Router V4 DOM

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

<Router history={hashHistory} >

‘число’ 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, он блокирует навигацию в браузере и вызывает transitionTo для выполнения клиентской навигации. Вы используете HistoryLocation, поэтому он использует API истории HTML5, чтобы завершить иллюзию навигации, имитируя новый URL в адресной строке. Если вы используете старые браузеры, это не сработает. Вам нужно будет использовать компонент HashLocation. Расширение

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

Например, в экспрессе это может выглядеть так:

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 на стороне сервера по мере необходимости.

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

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

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

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 # configure-your-server

для перебора его содержимого. Но никто не может остановить нас 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, и его можно найти говорится, что

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

имеет большую долю рынка

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

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

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

sudo npm run build

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

число (включая NaN и Infinity)

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

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

Вам нужно создать файл «conf» для решения страницы 404 not found, файл conf должен быть таким.

откройте свой терминал, введите приведенные ниже команды

cd / etc / apache2 / sites-availablelsnano sample.conf и добавьте в него приведенный ниже контент.

 <VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    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 или restart

, затем откройте папку 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-адрес.

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

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

Если вы размещаете приложение реагирования через AWS Static S3 Hosting & Amp ; CloudFront

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

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

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

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

devServer: {
      historyApiFallback: true
  }

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

1) Пользователь 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

4) run nodemon server.js или node server.js

сложно, потому что если какой-либо элемент имеет

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

синтаксис и

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

RewriteRule ^ /index.html [L]  

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

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

/*  /index.html  200

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

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

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

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

(**)

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

Пример:

То есть, больше никаких магических потребностей :)

событие и проверка, чтобы увидеть, существует ли заголовок:

<?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 ошибка и нет необходимости использовать историю хешей.

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

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

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

: Зависит от реализации, дата в формате локали.

Все остальные функции, представленные здесь, дают результат ошибки, если ввод 1.55499999999999.

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

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

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

копировании текста в буфер обмена { *} будет делать то, что вы хотите — создайте по одному для каждой даты, а затем сравните их с помощью componentDidMount Для тех, кто рано адаптировался к эпохе CofeeScript, вот еще один эквивалент для этого. componentWillReceiveProps Определите свои значения по умолчанию:

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

Например:

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

Надеюсь, это спасет кого-то еще от множества разочарований и потраченного времени.

Удачного кодирования .. .

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

https://firebase.google.com/docs/hosting/full-config {** **} переписывает

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

Я нашел решение для моего 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

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

    <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 это вернет фрагмент документа, содержащий элемент A и все применимые текстовые узлы.

В случае, если кто-нибудь здесь ищет решение для 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', он сначала загружается на стороне сервера. Поскольку на стороне сервера в этом месте ничего нет, возвращается не найдено. Когда у вас есть этот дополнительный маршрутизатор, он загружает ту же страницу, и загружается реагирующий маршрутизатор, а затем реагирующий загрузчик решает, какой компонент показать. Надеюсь, это поможет.

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

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

являются:

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var url = Request.Path   Request.QueryString;
            return App(url);
        }

        [Route("App")]
        public IActionResult App(string url)
        {
            return View("/wwwroot/app/build/index.html");
        }
   }

В основном на стороне MVC все несоответствующие маршруты попадут в Home/Index, как указано в startup.cs. Внутри Index From

startup.cs.

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });

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

Справочная информация:

Мы размещаем несколько приложений на одном сервере. Когда мы обновим сервер, он не поймет, где искать наш индекс в папке 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"
}

моего 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!');
});

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

Обратите внимание, что расширение фильтрует все URL по умолчанию. Это может привести к поломке некоторых веб-сайтов (например, Dropbox). Я изменил его, чтобы фильтровать только

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

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/

псевдокод:

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.

Последняя задача, поставленная в очередь источником сетевых задач после извлечения ресурса, была поставлена ​​в очередь.

enter image description hereenter image description here

Надеюсь, это поможет. :-)

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

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

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

Скоростной маршрут

Test - History API Протестировано и просто хочу поделиться этим.

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

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

Настройка вашего webpack.config.js ожидать от данной ссылки таких маршрутов.

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

Я использую WebPack, у меня возникла та же проблема Решение = & Gt ; В вашем файле 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.mdndom**** Eventwhy-doesnt-my-application-render-after-refreshing