React：基于道具创建动态路由答案

【问题标题】：React: creating a dynamic Route based on a propReact：基于道具创建动态路由
【发布时间】：2019-06-26 11:12:59
【问题描述】：

我正在从服务器检索一些数据，并将其映射到我的 react 项目中的子组件中。

componentDidMount() {
    axios.get('http://localhost:5000/machinelearning')
    .then(res => this.setState({projects: res.data, isLoading: false}))  
}


...
const projects = this.state.isLoading ? <CircularProgress color="secondary" size={200}/> : this.state.projects.projects[0].map((project, i) =>{
    const projectObj = Object.assign({}, project)
    console.log(projectObj)
    return(
    <div style={{padding: '15px'}} key={i+1}>
        <MachineLearningProject project={projectObj} />
    </div>

在每个组件中，我想创建一个动态路由，该路由链接到从服务器传入的同名组件。

我在我的组件上的图片上创建了一个动态链接。

<Link to={`${props.project.name}`} >
  <CardMedia
    className={classes.media}
    image={`data:image/jpeg;base64,${props.project.picture}`}
    title="Picture"
  />
  </Link>

在组件底部带有动态路由

 <Route path="/:project" 
component={ChatBot} //this component is hardcoded for testing purposes 
/>

理想情况下我希望它看起来像这样

但它不喜欢任何地方，我做错了什么？

【问题讨论】：

试试这个 - “/${props.project.name}} >”。此外，您的路线应该只维护在一个地方，不要在每个组件中创建路线。

标签： javascript reactjs dynamic routing

【解决方案1】：

您需要将组件的动态路由更新为

<LinkContainer to={props.project.name}>
      <Button> Label Stuff </Button>
</LinkContainer>

理想情况下，您的App.js 应该讨论要根据链接加载哪个组件，因为路由器逻辑驻留在那里。

<Router>
    <Switch>
        <Route path={"Your Path"} component={"You Component"} />
    </Switch>
<Router>

【讨论】：