Реактивный маршрутизатор не работает должным образом - PullRequest
Новая
       58

Реактивный маршрутизатор не работает должным образом

0 голосов
/ 29 декабря 2018

Я учусь реагировать и застрял на маршрутах реакции

. Обдумайте следующее: 

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import HelloWorld from "./HelloWorld.jsx";

const Root = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" exact component={HelloWorld} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

function NoMatch({ location }) {
  return (
    <div>
      <h3>
        No match found
      </h3>
    </div>
  );
}

export default Root;

на '/' на этом маршруте, компонент HelloWorld отображается, как и ожидалось, нона других маршрутах для примеров abc отображается Cannot GET /abc вместо No match found

Ответы [ 4 ]

0 голосов
/ 30 декабря 2018

Это происходит потому, что ваш сервер не настроен специально для обработки этих маршрутов.Сервер - это то, что определяет, что существует, а что нет - реагирующий маршрутизатор - всего лишь инструмент, позволяющий немного его использовать.

Исправление 1

Этого можно избежатьпроблема путем импорта HashRouter из пакетаact-router-dom, а не BrowserRouter.

. Результатом будет маршрутизация на основе URL-адресов с #/, предваряющим сам маршрут.Таким образом, ваш маршрут / теперь будет фактически #/.

Fix 2

Установите обратный прокси (nginx) в качестве посредника для обслуживанияваша страница с сервера Node.js.Используйте широкий подстановочный знак или уточните, если вам нужны более конкретные конфигурации.Он по-прежнему будет передавать URI / путь запроса к узлу, но не будет пытаться использовать их как отдельные конечные точки каждый раз или считывать файлы из файловой системы.

0 голосов
/ 29 декабря 2018

Загляните в песочницу, это поможет вам:

https://codesandbox.io/s/py114mqzj0

Пожалуйста, обновите ваши зависимости следующим образом: 

"dependencies": {
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-router-dom": "4.3.1",
},
0 голосов
/ 29 декабря 2018

Код работает просто отлично, если вы использовали create-react-app для настройки проекта реагирования, но если вы используете конфигурации веб-пакетов для ручной настройки проекта, для работы маршрутов реакции требуется devServer: {historyApiFallback: true,}.

0 голосов
/ 29 декабря 2018

Мне кажется, это работает нормально с последней версией React и response-router-dom. 

import { BrowserRouter, Route, Switch } from 'react-router-dom';

const HelloWorld = () => {
return <div>Hello World</div>;
};

const Root = () => {
return (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path='/' exact component={HelloWorld} />
                <Route component={NoMatch} />
            </Switch>
        </div>
    </BrowserRouter>
  );
};

function NoMatch() {
  return (
    <div>
        <h3>No match found</h3>
    </div>
  );
}

export default Root;

Код песочница ссылка, чтобы попробовать это

...