Destek "geçmişi", "Yönlendirici" de gerektiği gibi işaretlenir, ancak değeri "tanımsız" dır. Yönlendiricide

ReactJs'de yeniyim. Bu benim kodum:

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

ve webpack ile derlemek. Ayrıca takma adlarıma Main bileşeni ekledim. Konsol şu hataları atıyor: Şu bağlantıları da okudum:

React Router başarısız pervane 'geçmişi', tanımsız

Değer tanımsız olduğunda geçmişin gerekli olarak işaretlenmesini nasıl çözebilirim?

React-Router'ı yükseltme ve hashHistory'yi browserHistory ile değiştirme

ve web'de birçok arama, ancak bu sorunu çözemedim. React Router sürüm 4'tür

React-router v4 kullanıyorsanız, react-router-dom'u da kurmanız gerekir. Bundan sonra, react-router-dom'dan BrowserRouter'ı içe aktarın ve BrowserRouter için Router'ı değiştirin. Görünüşe göre v4 birkaç şeyi değiştiriyor. Ayrıca, react-yönlendirici belgeleri güncel değildir. Bu benim çalışma kodum:

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

Kaynak

React Router'ın hangi sürümünü kullanıyorsunuz? Yönlendirici sürüm 4, browserHistory sınıfından bir browserHistory örneğini geçirmeye değiştirildi, yeni belgelerdeki kod örneğine bakın .

Bu, otomatik olarak yükseltme yapan pek çok kişiyi çekiyor; bir göç belgesi 'herhangi bir gün' çıkacaktır.

Bunu en üste eklemek istiyorsun:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

ve

<Router history={newHistory}/>

Birden fazla rotaya sahip olmak istiyorsanız, bunun gibi anahtarı kullanabilirsiniz,

import {Switch} from 'react-router'; 

sonra

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

ES6'da da aynı sorunu yaşadım, ancak 'react-router-dom' kitaplığını kullanmaya başladığımda sorun çözüldü. ES6'nın tüm hayranları için işte:

npm install --save react-router-dom

İndex.js'de:

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

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

React Router'ın 4. Sürümü birkaç şeyi değiştirdi. Farklı geçmiş türleri için ayrı üst düzey yönlendirici öğeleri yaptılar. Sürüm 4 kullanıyorsanız veya <Router history={hashHistory}>ile değiştirebilmelisiniz . Daha fazla ayrıntı için bkz. Https://reacttraining.com/react-router/web/guides<HashRouter><BrowserRouter>

Ayrıca bir Login alıştırması yazıyorum. Ve sizin gibi aynı soruyla da karşılaşın. Bir günlük mücadeleden sonra, this.props.history.push('/list/')çok sayıda eklenti çekmek yerine yalnızca yapabileceğini öğrendim . Bu arada, react-router-domsürüm ^4.2.2. Teşekkürler!

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

Aşağıdaki "react-router@🖤3.0.5" ile benim için çalışıyor:

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