Добавление нескольких маршрутов с помощью реакции-маршрутизатора в приложении электродов ничего не делает

Question

Я начинаю работать с эталонным / изоморфным шаблоном Walmart "реакция / редукция / реакция-маршрутизатор", называемым электродом, и у меня возникают проблемы при добавлении нескольких маршрутов. Когда я добавляю 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 не может иметь два элемента рядом, поэтому мне пришлось его вкладывать. Примеры реагирующих маршрутизаторов, которые я вижу в Интернете, похоже, предполагают наличие корневого компонента приложения. Взглянув на образец редукса электродного маршрутизатора, они установили корневой компонент на "страницу". Что такое компонент "Страница"? Мои вопросы

1. Почему не работает мой второй маршрут?
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

Несколько вещей...

Вы можете избежать предупреждения "side by side 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 обеспечит любую выгоду, если вам не нужен какой-то интерфейс верхнего уровня для всех маршрутов (например, рендеринг заголовка, боковой панели и т. д.).