React-Redux'daki Yönlendirme Sorunları

Question

React-Redux ekosisteminde yeniyim, basit uygulamaları deneyerek öğreniyorum. Bu durumda, tepki red-red uygulamasında yönlendirmenin nasıl çalıştığını deniyorum. Temelde, fikirdir: sevk zaman uyumsuz eylem başarıyla tamamlayan yeni bir sayfaya bir bağlantı tıklayarak yeni sayfaya

1. Gezinti (bir tepki-yönlendirici bileşeni)
2. gezinin.

İşte benim kod

import React from 'react' 
    import {Link} from 'react-router' 
    import {routerActions} from 'react-router-redux' 
    import {connect} from 'react-redux' 

    class App extends React.Component { 
    render() { 
    // And you have access to the selected fields of the State too! 
    return (
     <div> 
      <header> 
       Links: 
       {' '} 
       <Link to="/">Home</Link> 
       {' '} 
       <Link to="/foo">Foo</Link> 
       {' '} 
       <Link to="/bar">Bar</Link> 
      </header> 
      <div> 
       <button onClick={() => routerActions.push('/foo')}>Go to /foo</button> 
      </div> 
     </div> 
     ) 
     } 
    } 
    export default connect(null, null)(App); 
    =================================================================== 
    import React from 'react' 
    import {connect} from 'react-redux' 
    class Foo extends React.Component { 
    render() { 
    return (
     <div> <h1>I'm Foo</h1> </div> 
     ) 
     } 
    } 
    export default connect(null, null)(Foo); 
    =================================================================== 
    import React from 'react' 
    import {connect} from 'react-redux' 
    class Bar extends React.Component { 
    render() { 
    return (
     <div> <h1>I'm bar</h1> </div> 
     ) 
     } 
    } 
    export default connect(null, null)(Bar); 

    =================================================================== 
    import React from 'react' 
    import ReactDOM from 'react-dom' 
    import {Provider} from 'react-redux' 
    import {Router, Route, browserHistory} from 'react-router' 
    import {syncHistoryWithStore} from 'react-router-redux' 
    import configureStore from './store' 
    import App from './components/test/App'; 
    import Bar from './components/test/Bar'; 
    import Foo from './components/test/Foo'; 
    // Get the store with integrated routing middleware. 
    const store = configureStore() 
    // Sync browser history with the store. 
    const history = syncHistoryWithStore(browserHistory, store) 
    // And use the prepared history in your Router 
    ReactDOM.render(
    <Provider store={store}> 
    <div> 
     <Router history={history}> 
      <Route path="/" component={App}> 
       <Route path="/foo" component={Foo}/> 
       <Route path="/bar" component={Bar}/> 
      </Route> 
     </Router> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
    =================================================================== 

    import {combineReducers,createStore, applyMiddleware} from 'redux' 
    import thunk from 'redux-thunk' 
    import createLogger from 'redux-logger' 
    import userReducer from './reducers/reducer-user'; 
    import {routerMiddleware,routerReducer} from 'react-router-redux' 
    import {browserHistory} from 'react-router' 

    export default function configureStore() { 
    // Create the routing middleware applying it history 
    const browserMiddleware = routerMiddleware(browserHistory); 
    const logger = createLogger(); 
    const reducer = combineReducers({ 
    userState: userReducer, 
    routing: routerReducer 
    }) 
    const store = createStore(reducer,applyMiddleware(thunk,browserMiddleware,logger)); 
return store; 

}

uygulama gayet kurar ve o iyi gelir ama bağlantıyı tıkladığınızda, bu işe yaramaz.
Bkz. screen shot of the running application
Çevresinde arama yaptım ve çeşitli yayınları okuyun ancak kök sorununu kesin olarak belirleyemedim.

Answer 1

Kodunuz yanlış görünüyor, ancak eksik bir şey var: yönlendiricinizin "alt öğelerini" oluşturmuyorsunuz! :)

Burada öyle bakabilirsiniz:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes#sharing-our-navigation

Eğer bir bileşen rota, bunun yerleştirileceği yeri belirtmek gerekir (eğer </Route path="application-path" component={MyComponent} /> kullanılarak bildirilen bir) işlemek istediğinizde. Reaktif yönlendiriciyi kullanarak, bunu children desteğini kullanarak belirtirsiniz. Ardından, bu propu React "görür", rotalarınızı (o da yuvalanmış bir rota olabilir) hale getirecektir.

Kodunuzu düzeltmek için, App bileşeninizin this.props.children ürününü doğru bir şekilde işlemesi gerekir. Böyle bir şey: Eğer "/ foo" rota vurduğunda

Şimdi

class App extends React.Component { 
    /* ... */ 
    render() { 
     return (
      <div> 
       <header>Links go here</header> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

, this.props.childrenFoo bileşen tarafından değiştirilecektir.

Bu arada, iç içe geçmiş yollarınızın (içte) "/" olması gerekmez, çünkü "hazır" olurlar. Bu, tepki yönlendiricinin iç içe geçmiş yolları oluşturmasıdır.

Bence bu, bununla iyi şanslar! :)