Проблема с маршрутизацией в React-JS / Reaction-router-dom

Question

Я установил react-router в своем проекте, запустив следующий фрагмент кода в окне командной строки:

npm install response-router

Я обнаружилreact-router успешно установлен, потому что при установке не было ошибок, а также был вывод:

• react-router@4.3.1 обновлен 1 пакет за 19,53 с

Основываясь на учебнике , я установил свой Index.js как следующий код:

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

Теперь, когда я хочу скомпилировать / собрать свое приложение, эти ошибкипроисходит:

./src/index.js
  Line 14:  'Router' is not defined          react/jsx-no-undef
  Line 14:  'browserHistory' is not defined  no-undef
  Line 15:  'Route' is not defined           react/jsx-no-undef
  Line 16:  'IndexRoute' is not defined      react/jsx-no-undef
  Line 17:  'Route' is not defined           react/jsx-no-undef
  Line 18:  'Route' is not defined           react/jsx-no-undef
  Line 19:  'Route' is not defined           react/jsx-no-undef

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

Answer 1

Вам нужно импортировать Router, Route и в файл index.js перед тем, как вы будете называть их как

 import { Router, Route } from "react-router";

IndexRoute не поддерживается в React-Router v4, вместо этого вы можете использовать Route с точным указателем вместо IndexRouteкак

  <Route exact path={path} component={Component} />

Редактировать:

browserHistory не поддерживается в activ-router v4, поэтому здесь есть альтернативное решение для этой проверки https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router