Блог

У меня есть следующие маршруты.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 — это одни и те же компоненты, но только с разными данными. По сути, это список проектов с одинаковым дизайном, но разным содержанием.

Возможно ли генерировать маршруты, динамически передающие разные данные, но всегда использующие один и тот же компонент?

Маргам:

 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:

 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;
  

Вы могли бы сделать что-то вроде этого :

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

А затем в компоненте Projects вы можете получить доступ к идентификатору с помощью {this.props.params.id } и в зависимости от этого идентификатора вы можете показывать разные компоненты.

Что-то вроде этого :

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

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

Надеюсь, это поможет.