在电极应用程序中使用 react-router 添加多条路线什么都不做

Question

我开始使用沃尔玛的 react/redux/react-router/isomorphic 样板，称为 electrode，我在添加多条路线时遇到了问题。当我添加第二条路线时，它似乎什么也没做，链接和推送到其他路线不会改变页面。

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 不能并排放置两个元素，所以我不得不嵌套它。我在网上看到的 React 路由器示例似乎假设有一个根应用程序组件。查看电极路由器 redux 示例，他们将根组件设置为 "Page"。 "Page" 组件是什么？我的问题是

为什么我的第二条路线不起作用？
我应该使用 IndexRoute 吗？
是否需要为根路由创建一个根组件？如果是这样，该组件是什么样的？

这是 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}/>
]

如果要嵌套路由，需要在 parent 组件的渲染中添加 {this.props.children} 让位给 child 组件。

如果您想要真正独立的非嵌套路由，它不应该是第一个路由的 child。我不认为添加 IndexRoute 会带来任何好处，除非你想要一些对所有路由来说都是顶级的 UI（比如呈现 header、侧边栏等）。

在电极应用程序中使用 react-router 添加多条路线什么都不做

Adding multiple routes with react-router in an electrode app does nothing

reactjs

react-router

walmart-electrode