web-dev-qa-db-ja.com

erikrasによるUniversal React Reduxボイラープレートのサイドバーで生成されたメニュー項目のroutes.jsに動的ルーティングを実装する方法

現在、CMSベースのプロジェクトに取り組んでいます。

エリクラのUniversal React Reduxボイラープレートを使用しています

動的ルーティングの処理に関する提案が本当に必要です

ボイラープレートから簡単なシナリオを見てみましょう...

routes.js

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

data.js

export const data = [
  {id: 1, property: 'Dashboard', link: '/'},
  {id: 2, property: 'Login', link: '/login'},
  {id: 3, property: 'About Us', link: '/About'},
];

ここで、ユーザーロールに基づいて、jsonデータのプロパティが変更されるとしましょう

新しいプロパティを言う：is

{id: 4, property: 'test page', link: '/test'}

Reactがコンポーネントをレンダリングするとき、routes.jsで定義されていないため、ルートリンクをどのように認識するか..

私はそれを実装する正しい方法を得ていません

ユーザーロールごとに特定のメニューコンテンツで構成されるサイドバーが必要です。

予約システムを構築しているとしましょう。admin、maintenance mode、assistant roleなどのさまざまなユーザーロールがあります。

そのため、ロールごとにプロパティが異なるため、ユーザーロールごとにプロパティが確実に異なるため、それに基づいてメニューを生成する必要があります。

ありがとう!!

reactjsmenuitemreact-router
24
Dev

/test urlに対してどのコンポーネントをレンダリングする必要があるかは、例から明らかではありませんか？ propertyキーの値だと思いますか？

最初のオプション

次のようなことができます：

<Route path="/:page" component={Page}/>

/から始まる各URLのPageコンポーネントをレンダリングでき、このコンポーネントはthis.props.routeParams.page内にページURLを持ちます。 Page#render内で必要なコンポーネントを見つけることができます：

render() {
  const url = this.props.routeParams.page;
  const PageComponent = data.find(page => page.link === url).property;
  render <PageComponent />;
}

2番目のオプション

Routesを動的に生成できますが、動作するかどうかはわかりません（確認できます）。この部分を交換するだけです：

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

と

 data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)
27
Alexandr Subbotin