React-router TypeError: _this.props.history undefined

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

при компиляции он показывает ошибку,

TypeError: _this.props.history is undefined

это мой файл index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

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

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

и это мой файл App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;

Ответ 1

Это связано с тем, что в React Router все изменилось, начиная с 4.0.0. Теперь вы должны использовать BrowserRouter из react-router-dom, когда вы использовали browserHistory. Таким образом, ваш код будет выглядеть так:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <Route path="/" component={ App }/>
    </BrowserRouter>, document.getElementById('root')
);

Конечно, сначала вам нужно установить react-router-dom.

Также обратите внимание, что если вы используете более одного элемента Route, вам придется использовать Switch, как описано в этом ответе.

Ответ 2

Вы используете npm? У меня была такая же проблема с "response-router": "^ 4.0.0" в моем пакете .json. Меняя его на "реактивный маршрутизатор": "^ 3.0.2" решил мою проблему.

Ответ 3

Ниже решение работает для меня в ReactDOM.render:

 <BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/user" component={User} />
    <Route path="*" component={page404} />
  </Switch>
 </BrowserRouter>

Он использует несколько маршрутов.

Ответ 4

Мне кажется, что this.props.history не определен, потому что вы не передали routeProps компоненту, который хотите визуализировать.

Измените ваши маршруты следующим образом:

 <Route path="/home" render={(routeProps) => <Home {...routeProps}/>} />

Вы также можете передать другие реквизиты для визуализации компонентов с помощью этого метода.

Ответ 5

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

history.js

import { createHashHistory as createHistory } from 'history'

export default createHistory()

root.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'

...

  <Router history={history}>
    <Route path="/test" component={Test}/>
  </Router>

В моем случае проблема заключалась в том, что у меня была версия пакета history, заблокированная в v2.1.2, в то время как response react-router зависел от версии history v4.x в ее собственных зависимостях. Таким образом, встроенные маршрутизаторы прекрасно работали, используя более новую history, но когда я пытался сделать это сам, я извлекал более старую history и получал несовместимый объект.