Опора "история" помечена как требуется в "маршрутизаторе", но ее значение "неопределенно". в маршрутизаторе

Я новичок в ReactJs. Это мой код: 

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

и компиляция его с webpack. Также я добавил основной компонент к моим псевдонимам. Консоль выдает эти ошибки: Я также читаю эти ссылки:

React Router failed prop 'history', is undefined

как я могу разрешить историю отмечена требуется, когда значение не определено?

обновление React-Router и замена hashHistory на browserHistory

и много поисков по всему интернету, но я не смог исправить эту проблему. React Router-это версия 4

6 68
reactjs react-router

6 ответов:

Если вы используете react-router v4, вам также необходимо установить react-router-dom. После этого импортируйте BrowserRouter из react-router-dom и switch Router для BrowserRouter. Кажется, что v4 меняет несколько вещей. Кроме того, документация react-router устарела. Это мой рабочий код:

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

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

источник

127

какую версию маршрутизатора React вы используете? Версия маршрутизатора 4 изменена с передачи в классе browserHistory на передачу экземпляра browserHistory, см. пример кода в новых документах.

Это ловило много людей, которые автоматически обновляют; миграционный документ будет выпущен "в любой день".

вы действительно хотите добавить это:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

и 

<Router history={newHistory}/>
11

Я получил ту же проблему в ES6, но когда я переключился на использование библиотеки "react-router-dom", проблема была решена. Для всех поклонников ES6, здесь мы идем:

npm install --save react-router-dom

в индекс.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

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

Если вы хотите несколько маршрутов вы можете использовать переключатель, как это,

import {Switch} from 'react-router';

затем 

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>
2

версия 4 React Router изменила несколько вещей. Они сделали отдельные элементы маршрутизатора верхнего уровня для различных типов истории. Если вы используете версию 4, Вы должны быть в состоянии заменить <Router history={hashHistory}> с <HashRouter> или <BrowserRouter>.
Для получения более подробной информации см. https://reacttraining.com/react-router/web/guides

1

Я также пишу практику входа в систему. А также встретить тот же вопрос, как и вы. После дневной борьбы я обнаружил, что только this.props.history.push('/list/') может сделать это вместо того, чтобы тянуть в много плагинов. Кстати, the react-router-dom версия ^4.2.2. Спасибо!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.push(path);
        }
    })
}
0