Проблемы с маршрутизацией в React-Redux

Question

Я новичок в экосистеме React-Redux, изучая примерные приложения. В этом случае я пытаюсь выяснить, как работает маршрутизация в приложении react-redux. В принципе, идея:

1. Перейдите на новую страницу, нажав на ссылку (а реагировать-маршрутизатор компонента)
2. Перейдите на новую страницу после успешного завершения запуска действий асинхронных.

Вот мой код

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; 

}

Приложение строит отлично и он приходит хорошо, но когда я нажимаю на ссылку, он не работает.
См. screen shot of the running application
Искал и прочитал разные сообщения, но я не смог определить проблему с корнем.

Answer 1

Ваш код кажется правильным, но есть простая вещь, которую вы не видите: вы не отрисовки «ребенка» вашего маршрутизатора! :)

Вы можете проверить, что здесь:

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

Всякий раз, когда вы хотите сделать составной маршрут (тот, который вы объявленным с использованием </Route path="application-path" component={MyComponent} />), то необходимо указать, где он будет размещен. Используя реактивный маршрутизатор, вы указываете это с помощью опоры children. Затем, когда React «видит» эту опору, она будет отображать ваши маршруты (это может быть и вложенный маршрут).

Для того, чтобы исправить ваш код, необходимо, чтобы ваш компонент App правильно обрабатывал this.props.children. Нечто подобное:

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

Теперь, когда вы нажмете "/ Foo" маршрут, this.props.children будет заменен Foo компонентом.

Кстати, вашим вложенным маршрутам (внутри) не нужно иметь «/», так как они будут «добавлены». Это способ рендеринга вложенных маршрутов.

Я думаю, что это, удачи в этом! :)