Вложенные маршрутизаторы React Router V4 не работают при перезагрузке страницы - PullRequest
Новая
       38

Вложенные маршрутизаторы React Router V4 не работают при перезагрузке страницы

0 голосов
/ 02 июля 2018

Я создал новый веб-сайт http://gk -chart.org / с реакцией и добавленной маршрутизацией с использованием response-rotuter-dom. 

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

и добавлены маршрутизаторы как: - 

<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route path="/galery" component={Galery}></Route>
</Switch>

для вложенной маршрутизации нескольких типов диаграмм, я добавил эти маршруты в компоненте Галерея 

<Route exact path={this.props.match.path} component={LineChart}></Route>
<Route path={`${this.props.match.path}/line`} component={LineChart}></Route>
<Route path={`${this.props.match.path}/lineChartFill`} component={LineChartFill}></Route>
<Route path={`${this.props.match.path}/lineChartComparision`} component={LineChartComparision}></Route>
<Route path={`${this.props.match.path}/lineChartComparisionFill`} component={LineChartComparisionFill}></Route>

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

На странице галереи http://gk -chart.org / galery присутствует несколько вложенных маршрутов, когда я нажимаю на эти маршруты, они загружаются правильно, но когда я перезагружаю страницу, она не будет нагрузки. Пожалуйста, помогите мне решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Наконец, после роуминга на стольких сайтах, я узнал, что в реакции есть два типа маршрутизаторов: -

  1. HashRouter для статических сайтов маршрутизации или может называться маршрутизацией с самостоятельным управлением.

  2. BrowserRouter для маршрутизации, поддерживаемой сервером.

Я использовал неправильный вариант для своего веб-сайта в качестве BrowserRouter, поскольку у меня не было никакой поддержки сервера (узла, python и т. Д.) Поэтому я должен использовать HashRouter 

import {HashRouter as Router, Route, Switch} from "react-router-dom";

Исправлена ​​проблема http://gk -chart.org / с использованием Hashrouter's.

0 голосов
/ 02 июля 2018

Сервер не знает о ваших клиентских маршрутах. Ваш процесс сборки, вероятно, создает один index.html, который ссылается на ваши ресурсы. Этот index.html находится на /galery/index.html. Когда вы нажимаете кнопку обновить, сервер ищет файл в /galery/line/index.html, который он не находит.

Это распространенная проблема. Чтобы это исправить, многие люди говорят серверу обслуживать /galery/index.html, вместо этого используя какое-то правило. Это зависит от того, как ваши файлы хранятся. Приложение реагирует на клиентскую сторону, видит немного другой маршрут и правильно отображает маршрут.

...