React.jsは、私は、次のroutes.jsxを有する異なるデータ

Question

と同じコンポーネントの動的ルートを生成する：

ReactDOM.render((
    <Router> 
     <Route component={Wrapper} > 
      <Route path="/" component={Home} /> 
      <Route path="projects" component={Projects} /> 
      <Route path="projects/Margam" component={Margam} /> 
      <Route path="projects/Margam2" component={Margam2} /> 
      <Route path="projects/Margam3" component={Margam3} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

Margam、Margam2とMargam3同じ成分であるが、わずかに異なるデータを持ちます。これは本質的に、同じデザインであるが内容が異なるプロジェクトのリストです。

異なるデータを動的に渡す経路は生成できますが、常に同じコンポーネントを使用できますか？

Margam：

import React from 'react'; 

import Video from './video.jsx'; 

class Margam extends React.Component { 
    render() { 
    return (
     <div> 
      <h2>Margam</h2> 
      <Video /> 
     </div> 
    ); 
    } 
} 

export default Margam; 

Margam2：

<Route component={Wrapper} > 
    <Route path="/" component={Home} /> 
    <Route path="projects/:id" component={Projects} /> 
</Route> 

そしてプロジェクトのコンポーネントにあなたが{これでIDにアクセスすることができます

import React from 'react'; 

import Video from './video.jsx'; 

class Margam extends React.Component { 
    render() { 
    return (
     <div> 
      <h2>Margam 2</h2> 
      <Video /> 
     </div> 
    ); 
    } 
} 

export default Margam2; 

Answer 1

あなたはこのような何かを行うことができます.props.params.id}、そのIDに応じて異なるコンポーネントを表示することができます。

このような何か：

render() { 
    let Margam = (this.props.params.id == "margam") ? <Margam /> : ""; 
    let Margam2 = (this.props.params.id == "margam2") ? <Margam2 /> : ""; 

    return (
     <div> 
      {Margam} 
      {Margam2} 
     </div> 
    ); 
} 

は、このヘルプを願っています。