動的に経路を作成する

Question

まず最初に、1つのページに2つのコンポーネントを置くことができますが、1つの静的なマークアップが表示されますが、2番目のコンポーネントは配列内の各アイテムのリンクを表示するdivになりますあなたはdivの下部にそれをクリックすると、それぞれのデータが表示されますか？

可能であれば、要素内で.mapを実行してルートを印刷するなどの簡単な動的小道具ですか？

ルータオブジェクトに次のようなメッセージが表示されますが、node_modulesフォルダにもありますが、反応ルータはグローバルにインストールされています。 React Routerを使用して

'react-router' does not contain an export named 'hashHistory'.

import React, { Component } from 'react'; 
import { Router, Route, IndexRoute, hashHistory } from "react-router"; 

class DetailsComponent extends Component { 
    render() { 
    return (
     <Router history={hashHistory}> 
     // in here will map this.props.data and for each one print a route 
     // the component for that route will be a DetailedViewComponent that 
     // that takes in the data in the props and renders it 
     // so i might need a link? in this render method aswell? 
     </Router> 
    ); 
    } 
} 

export default DetailsComponent ; 

Answer 1

は、いくつかのより多くの先輩は、開発者が反応し、彼らは私が後npm package Component-Router私はまだ戻ってプロジェクトの上に持っていないしたが、一度完了し、完全なコードを掲載します何言っ:)

Answer 2

は、あなたがルートを動的にロードするためにmatchのparamsを設定することができます。

ie。

<Route path="/dynamicroute/:id" component={DynamicComponent}/> 

は<DynamicComponent/>のthis.props.match.params内idのparamを提供します。

あなたが<DynamicComponent/>コンポーネントの"/dynamicroute/helloworld"：this.props.match.params.idのURLの場所に自分自身を見つけた場合は、"helloworld"が返されます。

matchのようなパラメータを指定するだけで、提供されていない場合はエラーとなります。:idオプションのmatchパラメータの場合、後続の疑問符 "？"追加することができます。 path="/dynamicroute/:id?"