電極アプリの反応ルータで複数の経路を追加すると、何もしません

Question

私はWalmartのreact/redux/react-router/isomorphic定型文を電極と呼び始めています。 2番目のルートを追加すると、何もしないように見えます。リンクして他のルートに移動しても、ページは変更されません。

http://www.electrode.io/docs/get_started.html

ここ

https://github.com/electrode-io/electrode-redux-router-engine

は定型で、単一のルートが

// routes.jsx 
import React from "react"; 
import {Route} from "react-router"; 
import Home from "./components/home"; 

export const routes = (
    <Route path="/" component={Home}/> 
); 

ように見えたものだと、ここで私は置くことができませんでした

import React from "react"; 
import {Route, IndexRoute} from "react-router"; 
import Home from "./components/home"; 
import Foo from "./components/foo"; 

export const routes = (
    <Route path="/" component={Home}> 
    <Route path="/foo" component={Foo}/> 
    </Route> 
); 

にそれを変更するものですそのルートが並んでいるので私は、jsxが2つの要素を並べて持つことができないので、私はそれを入れ子にしなければならないというエラーが表示されます。私がオンラインで見ている反応ルータの例は、ルートアプリケーションコンポーネントを想定しているようです。電極ルータreduxサンプルを見ると、ルートコンポーネントが "Page"に設定されます。 「ページ」コンポーネントとは何ですか？私の質問は

1. なぜ私の2番目のルートは機能しませんか？
2. IndexRouteを使用すべきですか？
3. ルートルートのルートコンポーネントを作成する必要がありますか。もしそうなら、そのコンポーネントはどのように見えますか？

ここapp.jsxコード

// 
// This is the client side entry point for the React app. 
// 

import React from "react"; 
import {render} from "react-dom"; 
import {routes} from "./routes"; 
import {Router} from "react-router"; 
import {createStore} from "redux"; 
import {Provider} from "react-redux"; 
import "./styles/base.css"; 
import rootReducer from "./reducers"; 

// 
// Add the client app start up code to a function as window.webappStart. 
// The webapp's full HTML will check and call it once the js-content 
// DOM is created. 
// 

window.webappStart =() => { 
    const initialState = window.__PRELOADED_STATE__; 
    const store = createStore(rootReducer, initialState); 
    render(
    <Provider store={store}> 
     <Router>{routes}</Router> 
    </Provider>, 
    document.querySelector(".js-content") 
); 
}; 

Answer 1

いくつかはあなたが空のルートでごルートを包むか、返すことによって警告「側JSXバイ・サイド」を避けることができます...

です配列。

// return nested routes 
return ( 
    <Route path="/"> 
    <Route path="foo" component={Foo}/> 
    <Route path="bar" component={Bar}/> 
    </Route> 
) 

// return array, must use keys 
return [ 
    <Route key="foo" path="/foo" component={Foo}/>, 
    <Route key="bar" path="/bar" component={Bar}/> 
] 

あなたが巣のルートにしたい場合は、親コンポーネントのレンダリングに{this.props.children}を追加することによって、子コンポーネントに道を譲る必要があります。

ネストされていないルートを本当に分離したい場合は、最初のルートの子であってはなりません。 IndexRouteを追加すると、すべてのルート（ヘッダー、サイドバーなどのレンダリングなど）のトップレベルのUIが必要な場合を除き、どんな利点もありません。