Właściwość „history” jest oznaczona jako wymagana w „Router”, ale jej wartość to „undefined”. w routerze

Jestem nowy w ReactJs. To jest mój kod:

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

i kompilowanie go za pomocą pakietu internetowego. Dodałem również komponent Main do moich aliasów. Konsola wyrzuca te błędy: czytam też te linki:

React Router failed prop 'history', jest niezdefiniowane

Jak rozstrzygnąć, czy historia jest oznaczona jako wymagana, gdy wartość jest niezdefiniowana?

Uaktualnienie React-Router i zamiana hashHistory na browserHistory

i wiele wyszukiwań w internecie, ale nie udało mi się rozwiązać tego problemu. React Router to wersja 4

Jeśli korzystasz z React-router v4, musisz również zainstalować React-router-dom. Następnie zaimportuj BrowserRouter z pliku React-router-dom i zmień router na BrowserRouter. Wygląda na to, że v4 zmienia kilka rzeczy. Ponadto dokumentacja React-router jest nieaktualna. To jest mój działający kod:

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

Źródło

Której wersji React Router używasz? Wersja routera 4 została zmieniona z przekazywania w klasie browserHistory na przekazywanie instancji browserHistory, zobacz przykład kodu w nowej dokumentacji .

To przyciąga wielu ludzi, którzy automatycznie aktualizują; dokument migracji zostanie opublikowany „lada dzień”.

Chcesz dodać to na górze:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

i

<Router history={newHistory}/>

Jeśli chcesz mieć wiele tras , możesz użyć takiego przełącznika,

import {Switch} from 'react-router'; 

następnie

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

Mam ten sam problem w ES6, ale kiedy przełączyłem się na bibliotekę „React-router-dom”, problem został rozwiązany. Dla wszystkich fanów ES6, zaczynamy:

npm install --save react-router-dom

W index.js:

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

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

Wersja 4 React Router zmieniła kilka rzeczy. Stworzyli oddzielne elementy routera najwyższego poziomu dla różnych typów historii. Jeśli używasz wersji 4 powinna być w stanie wymienić <Router history={hashHistory}>z <HashRouter>lub <BrowserRouter>.
Więcej szczegółów można znaleźć pod adresem https://reacttraining.com/react-router/web/guides

Piszę również praktykę logowania. A także spotykam się z tym samym pytaniem, co Ty. Po całodziennej walce stwierdziłem, że tylko this.props.history.push('/list/')może to zrobić, zamiast ciągnąć wiele wtyczek. Nawiasem mówiąc, react-router-domwersja jest ^4.2.2. Dzięki!

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

Poniższe działa w przypadku mnie z adresem „act-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')
)