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を正しく処理する必要があります。そのような何か：あなたが "/ foo" というルートを打ったとき

今

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

は、this.props.childrenはFooコンポーネントによって置き換えられます。

ちなみに、ネストされたルート（内部のルート）には、 "/"を付ける必要はありません。なぜなら、それらのルートは「前置される」ためです。これは、反応ルータがネストされたルートをレンダリングする方法です。

私はそれが、それと幸運だと思います！ :)