Question

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

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”。什么是“页面”组件？我的问题是

为什么我的第二条路线不起作用？
我应该使用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

一些事情......

您可以通过将路线包裹在空路线中或返回阵列来避免“并排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（比如渲染标题，侧边栏等）。

在电极应用程序中使用react-router添加多个路由不会

1 个答案: