React.js는 서로 다른 데이터

Question

와 같은 구성 요소에 대한 동적 경로를 생성 I 다음 routes.jsx 있습니다

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> 
    ); 
} 

희망이 도움이됩니다.