0

私は電極と呼ばれるウォルマートの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")
  );
};
4

1 に答える 1

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すべてのルートの最上位の UI (ヘッダー、サイドバーなどのレンダリングなど) が必要でない限り、を追加してもメリットはないと思います。

于 2016-11-30T13:36:43.297 に答える