React Router: Невозможно прочитать свойство "путь" неопределенного

Я только начал изучать React и застрял в этой ошибке.

Uncaught TypeError: Невозможно прочитать свойство "путь" неопределенного на новом маршрутизаторе

Вот мой код:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

Учебник, который я использовал, использует React-Router 2.0.0, но на моем рабочем столе я использую 4.1.1. Я попытался найти изменения, но не смог найти решение, которое сработало.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

Ответ 1

Ошибка заключается в том, что api в React Router v4 полностью отличается. Вы можете попробовать следующее:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

Вы можете просмотреть документацию, чтобы узнать, как она работает сейчас.

Здесь у меня есть репо с анимацией маршрутизации.

И здесь вы можете найти живую демоверсию.

Ответ 2

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

Оказывается, я случайно забыл включать to проп в одном из <Link/> компоненты.

Желаем, чтобы сообщение об ошибке было лучше. Простая required prop "to" not found или что-то в этом роде было бы полезно. Надеюсь, это спасет кого-то еще, кто некоторое время столкнулся с той же проблемой.

Ответ 3

У меня была такая же ошибка, и я разрешил ее, обновив history с 2.xx до 4.xx

npm история установки @последняя --save

Ответ 4

Из-за этого у меня была другая причина, но та же ошибка. Поместите это здесь, если это случится и для других, и это может помочь. Проблема для меня заключалась в том, что я обновился до react-router-4 и изменился доступ к pathname.

Изменение: (React-Router-3 и ранее)

this.props.location.pathname

To: (React-Router-4)

this.props.history.location.pathname

Ответ 5

Просто убедитесь, что вы добавляете to реквизиту в <Link> в противном случае вы бы также получить ту же ошибку.