React-router "Невозможно GET/*", за исключением корневого URL-адреса

Я готов использовать React-router для своего приложения, и сначала я пытаюсь выполнить пример, приведенный в документе, который я скопировал ниже. Теперь, когда я перехожу к localhost:3000/, я вижу "приложение", как ожидалось, но каждая другая страница, например localhost:3000/inbox, возвращает "Can not GET/inbox". Что мне здесь не хватает?

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
}});

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
}});

var App = React.createClass({
  render () {
    return (
      <div><h1>App</h1>
        <RouteHandler/>
      </div>
)}});

var routes = (
  <Route path='/' handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

Ответы

Ответ 1

Я считаю, что проблема заключается в том, что вы делаете запрос ресурса http:

GET /inbox HTTP/1.1
Host: localhost:3000

но используют только маршрутизацию на стороне клиента. Вы намереваетесь также выполнять рендеринг на стороне сервера? Возможно, вам потребуется изменить местоположение вашего маршрутизатора на HistoryLocation вместо HashLocation (по умолчанию).

Указатель местоположения Router.run указывает, где сопоставить маршруты. Если вы не используете серверный ответ React, я считаю, что вам нужно использовать Router.HashLocation (или просто оставить его пустым).

Если нет, вы получаете неправильный доступ к своему компоненту. Попробуйте использовать http://localhost:3000/#/inbox. Может потребоваться немного, чтобы ознакомиться с React-Router, но это определенно стоит!

Реакция на документацию маршрутизатора - HashLocation

Ответ 2

Если вы используете webpack-dev-server, есть опция history-api-fallback. Если установлено значение true 404s, произойдет возврат к /index.html.

Добавьте опцию в раздел devServer конфигурации Webpack следующим образом:

devServer: {
    contentBase: 'app/ui/www',
    devtool: 'eval',
    hot: true,
    inline: true,
    port: 3000,
    outputPath: buildPath,
    historyApiFallback: true,
},

Ссылка на документы в Webpack: https://webpack.github.io/docs/webpack-dev-server.html

Ответ 3

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

Если вам интересно узнать об этом, этот ответ был действительно полезен для меня: URL-адрес React-router не работает при обновлении или написании вручную

Ответ 4

Запрос будет отправлен на сервер, а каталог/файл на самом деле не существует, поэтому он вернет 404, поэтому вы должны сообщить серверу вернуть индексную страницу для всех запросов, а реакция будет обрабатывать rooting:

если мне нравится, вы размещаете свое приложение-ответ на 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.