0

我开始使用 Walmart 的 react/redux/react-router/isomorphic 样板，称为电极，我无法添加多个路由。当我添加第二条路线时，它似乎什么都不做，并且链接和推送到其他路线不会改变页面。

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

  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")
  );
};
4

1 回答 1

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}到父组件的渲染中让位于子组件。

如果您想要真正独立的非嵌套路由，它不应该是第一条路由的子路由。我不认为添加 anIndexRoute会带来任何好处，除非你想要一些对所有路由都是顶级的 UI（比如渲染标题、侧边栏等）。

于 2016-11-30T13:36:43.297 回答