Reactjs React.js为具有不同数据的相同组件生成动态路由

我有以下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'));

ReactDOM.render((
)，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;

从“React”导入React；
从“/Video.jsx”导入视频；
类Margam扩展了React.Component{
渲染（）{
返回(
马加姆
);
}
}
出口违约保证金；

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;

从“React”导入React；
从“/Video.jsx”导入视频；
类Margam扩展了React.Component{
渲染（）{
返回(
玛加姆2号
);
}
}
导出默认保证金2；

您可以这样做：

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

然后在项目组件中，您可以使用{this.props.params.id}访问id，并根据该id显示不同的组件

大概是这样的：

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

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

render（）{
让Margam=（this.props.params.id==“Margam”）？：“”；
让Margam2=（this.props.params.id==“Margam2”）？：“”；
返回(
{Margam}
{Margam2}
);
}

---

希望这有帮助

您可以这样做：

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

然后在项目组件中，您可以使用{this.props.params.id}访问id，并根据该id显示不同的组件

大概是这样的：

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

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

render（）{
让Margam=（this.props.params.id==“Margam”）？：“”；
让Margam2=（this.props.params.id==“Margam2”）？：“”；
返回(
{Margam}
{Margam2}
);
}

---

希望这有帮助

我会试一试，让你知道。谢谢，我会试一试，让你知道的。谢谢