Пропік `історія` позначений як необхідний в` Маршрутизаторі`, але його значення "невизначене". у маршрутизаторі

Я новачок у 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 та заміна hashHistory на browserHistory

і багато пошуків в Інтернеті, але я не зміг вирішити цю проблему. React Router - версія 4

Якщо ви використовуєте response-router v4, вам також потрібно встановити response-router-dom. Після цього імпортуйте BrowserRouter з реактор-маршрутизатора-дому та переключіть Router для BrowserRouter. Здається, v4 змінює кілька речей. Крім того, документація про реакційний маршрутизатор застаріла. Це мій робочий код:

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')
);

Джерело

Яку версію React Router ви використовуєте? Версія 4 маршрутизатора змінена з передачі в класі browserHistory на передачу екземпляра browserHistory, див. Приклад коду в нових документах .

Це ловить багато людей, які автоматично оновлюються; міграційний документ буде виданий "будь-якого дня зараз".

Ви хочете додати це вгорі:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

і

<Router history={newHistory}/>

Якщо ви хочете мати кілька маршрутів, ви можете використовувати такий перемикач,

import {Switch} from 'react-router'; 

тоді

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

Я отримав ту саму проблему в ES6, але коли я перейшов на використання бібліотеки 'response-router-dom', проблема була вирішена. Для всіх шанувальників ES6, ось ми:

npm install --save react-router-dom

У index.js:

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

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

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

Я також пишу практику входу. А також зустріти таке ж питання, як ви. Після денної боротьби я виявив, що тільки це this.props.history.push('/list/')можна зробити, замість того, щоб втягувати багато плагінів. До речі, 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);
        }
    })
}

Нижче працює для мене з "response-router@^3.0.5":

package.json:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)