0

問題：

パラメータを含む動的リンクがある場合を除いて、この動的ルーターは機能します。

具体的には：

リンクをハードコーディングしたり、ブラウザに入力したりできます。

 <Link to="Inventory/All-Vehicles">All Vehicles</Link>
  http://localhost:3000/Inventory/All-Vehicles

そしてコードで：

const { id } = this.props.params;
console.log({ ID } );

コンソールには次が表示されます。

{id: "すべての車両"}

しかし、動的リンクでは...

< Link to={ this.props.item.linkTo } className="">{ this.props.item.title }< /Link>

これは以下を生成します:

< a class="" href="#Inventory/All-Vehicles" data-reactid=".0.0.0.0.0.0.0.0.0.0.$2.1.0.$0.0.0.0">All Vehicles< /a>

ブラウザが表示されます

ローカルホスト:3000/#/Inventory/すべての車両

一瞬の間、その後にリセットされます（ページはリロードされません）

ローカルホスト:3000/#/インベントリ

コンソールが表示されている場合:

オブジェクト {id: 未定義}

以下のジョーダンの提案に従って、この質問を書き直しました。
長すぎないことを願っています。ストアとして代替フラックスを使用しています

ルート.js:

import React, { Component, PropTypes } from 'react';
import Router, { Route } from 'react-router';
// alt
import connectToStores from '../../node_modules/alt/utils/connectToStores';
import NavStore from '../alt/stores/nav-store';
import NavActions from '../alt/actions/nav-actions';

class Routes extends Component {

  constructor(props) {
    super(props);
    this.state = {
      routes: []
    };
  }

  static getStores() {
    return [NavStore];
  }

  static getPropsFromStores() {
    return NavStore.getState();
  }

  componentDidMount() {
    const clientId = this.props.clientId;
    NavActions.getAll(clientId);
  }

  fetchNonRootComponent(paths) {
    let result;
    paths.map((path) => {
      if (path !== '/') {
        result = path;
      }
    });
    return result;
  }

  fetchMenuSystem(data) {
    const self = this;
    const currRoutesState = this.state.routes;
    const routes = data === undefined ? this.props.items : data;

    routes.map((route) => {
      // set paths up first
      let currPaths = [];
      if (route.paths !== undefined) {
        currPaths = route.paths;
      } else {
        currPaths.push(route.linkTo);
      }
      // Components - first check for ecomMods
      let currComponent;

それが routes.js ファイルにある場合は、おそらくこのセクションで何かを行う必要があります。

      if (route.ecomMod !== undefined) {
        currComponent = require('../components/pages/' + route.ecomMod);
        // clear out currPath if this is an ecom Module
        // and start a new currPaths array
        currPaths = [];
        if (route.parentId === null) {
          currPaths.push(route.ecomMod);
        } else {

          // multi-purpose :id, eg.
          // Inventory/Used-Vehicles
          // Inventory/Stock#1234

          currPaths.push(route.ecomMod + '/:id');
        }
      } else {
        const nonRootComponent = self.fetchNonRootComponent(currPaths);
        currComponent = require('../components/pages/' + nonRootComponent);
      }

      currPaths.map((currPath) => {
        const props = { key: currPath, path: currPath, component: currComponent };
        currRoutesState.push(<Route { ...props } />);
      });

      if (route.childNodes !== undefined) {
        self.fetchMenuSystem(route.childNodes);
      }
    });
    return currRoutesState;
  }

  fetchRoutes() {
    const result = this.fetchMenuSystem();
    return (
      <Route component={ require('../components/APP') }>
        { result }
        <Route path="SiteMap" component={ require('../components/pages/Site-Map') }/>
        <Route path="*" component={ require('../components/pages/Not-Found') }/>
      </Route>
    );
  }

  render() {
    if (this.props.items.length === 0) return <div>Loading ...</div>;
    const routerProps = {
      routes: this.fetchRoutes(),
      createElement: (component, props) => {
        return React.createElement(component, { ...props });
      }
    };
    return (
      <Router { ...routerProps } history= { this.props.history } />
    );
  }
}

Routes.propTypes = {
  clientId: PropTypes.string.isRequired,
  history: PropTypes.object.isRequired,
  items: PropTypes.array.isRequired
};

export default connectToStores(Routes);

navItems.json:

{
  "data": [
    {
      "id": 1,
      "parentId": null,
      "linkTo": "/",
      "paths": [
        "/",
        "Home"
      ],
      "title": "Home",
    },
    {
      "id": 2,
      "parentId": null,
      "linkTo": "About-Us",
      "title": "About Us",
    },
    {
      "id": 3,
      "parentId": null,
      "ecomMod": "Inventory",
      "linkTo": "Inventory",
      "title": "Inventory",
      "childNodes": [
        {
          "id": 30,
          "parentId": 3,
          "ecomMod": "Inventory",
          "linkTo": "Inventory/All-Vehicles",
          "title": "All Vehicles",
        }
        ]
    }
  ]
}
4

1 に答える 1

1

解決した

ほぼ 1 日後、私はこれを解決しましたが、私が犯した間違いは非常にばかげており、露骨に明らかでした。

私が疑ったように、動的ルーターは問題ありません。問題はドロップダウンメニューにありました。ページ上のハードコーディングされたリンクが機能したと私は疑っていました。

実例として、これはインベントリ ルートの作成方法です。

<Route path="Inventory" component="Inventory">
   <Route path="Inventory/All-Vehicles" component="Inventory" />
</Route>

したがって、ダムの親にルートハンドラーイベントがある場合、すべての車両のクリックがその親に「バブルアップ」することは誰にとっても明らかであり、それはまさに私のものでした。

したがって、私の場合、この親リンク:

  <li id={ this.props.item.id }
      ......
      onClick={ this.routeHandler.bind(this, { newLinkTo } ) } >
    <span className="">{ this.props.item.title }</span>
      // get the children
      <div>{ this.fetchSubMenu(this.props.item) }</div>
  </li>

今でしょ：

  <li id={ this.props.item.id }
      ......
  >
    <Link to={ newLinkTo } className="">{ this.props.item.title }</Link>
      // get the children
      <div>{ this.fetchSubMenu(this.props.item) }</div>
  </li>

得られた教訓: ノード ツリーの上にルート ハンドラがある場合、子プロセスが行おうとするルートの変更をすべて引き継ぎます。

于 2015-11-05T18:28:17.197 に答える