5

ile yeniden yönlendirilmiyor. React ile yeni oluyorum ve Reakt projemi Facebook'un create-react-app ile kurdum. İşte çekirdek dosyalar şunlardır:React v15.5 setup rea-redux v5 kurulumu

Index.js

import React from 'react'; 
import ReactDOM, { render } from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import createHistory from 'history/createBrowserHistory'; 

import { createStore, applyMiddleware } from "redux"; 
import { Provider } from 'react-redux' 
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'; 
import thunk from 'redux-thunk'; 
import reducers from './reducers'; 

import App from './containers/App'; 
import Routes from "./Routes"; 

const browserHistory = createHistory(); 
middleware = routerMiddleware(browserHistory); 
const store = createStore(reducers, applyMiddleware(middleware, thunk)) 
const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <App /> 
    </Router> 
    </Provider>, document.getElementById('root') 
); 

Routes.js

import React, { Component } from 'react'; 
import { Route, Switch } from 'react-router'; 

import Home from './containers/Home'; 
import About from './containers/About'; 
import Contact from './containers/Contact'; 

class Routes extends Component { 
    render() { 
    return (
     <Switch> 
     <Route exact path="/" component={ Home } /> 
      <Route path="/about" component={ About } /> 
      <Route path="/contact" component={ Contact } /> 
     </Switch> 
    ); 
    } 
} 

export default Routes; 

App.js

import React, { Component } from "react"; 
import { Link } from 'react-router-dom'; 
import Routes from "../Routes"; 
import SideNav from '../presentation/SideNav'; 

class App extends Component { 
    render() { 
     return (
      <div> 
       <Link to='/'>Home</Link> 
       <Link to='/about'>about</Link> 
       <Link to='/contact'>contact</Link> 
       <SideNav /> 
       <Routes /> 
      </div> 
     ); 
    } 
} 

export default App; 

p Burada karşılaştığım roblem, Sayfayı belirli bir rota ile yüklediğimde, bu bileşen tarayıcıda oluşturuluyor. Ama "Link" kullanarak farklı rotaya navigasyon ediyorsam, Bu durumda

<Link to='/contact'>contact</Link> 

demek,/iletişim bileşeni yüklenmiyor ancak rota değiştirerek ve tarayıcıda günümüze taşıyor.

Ben çözümleri için baktım ama çoğunlukla bile react-router-redux yılında, itfa kodu kullanarak, örnek, güncellenen pakette değil ConnectedRouter içerir. Ben eksik kod falan bazı aptalca bir hata yaptıysanız

These dependencies is being used

Bilmiyorum.

Şimdiden teşekkürler. :)

+0

Konsol günlüklerini de kopyalayıp yapıştırabilir misiniz? – hisener

+0

Konsolda hata yok, yalnızca kullanılmayan içe aktarılmış dosyalarda uyarılar var. – rajat

+0

Redux'u index.js'den tamamen kaldırırsam, yönlendirme beklendiği gibi çalışıyor ... – rajat

cevap

3

çözüm Yönlendirici ve Redux birlikte çıkmaması Tepki, Genel here

import { withRouter } from 'react-router-dom' 

// before 
export default connect(mapStateToProps)(Something) 

// after 
import { withRouter } from 'react-router-dom' 
export default withRouter(connect(mapStateToProps)(Something)) 

olduğunu. Bununla birlikte, bir uygulama, konum değiştiğinde güncellenmeyen bir bileşene sahip olabilir (çocuk rotaları veya etkin gezinme bağlantıları güncellenmez).

Bu olur: bileşen Redux ile bağlanır

  • bağlantı() (Bileşik).

sorun Redux shouldComponentUpdate uygular ve ondan sahne almıyor eğer bir şey değişmiş olduğunu hiçbir belirti yok olmasıdır:

  • bileşeni şöyle render edilmez, yani bir “rota bileşeni” değil yönlendirici Bu düzeltmek için basittir. Bileşeninizi nereye bağladığınızı bulun ve bunuRouter ile sarın.