我正在从服务器中检索一些数据,这些数据映射到我的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
/>
理想情况下,我希望它看起来像这样
但是它不喜欢任何地方,我在做什么错了?
答案 0 :(得分:0)
您需要将组件的动态路由更新为
<LinkContainer to={props.project.name}>
<Button> Label Stuff </Button>
</LinkContainer>
理想情况下,App.js
应该根据路由器逻辑驻留在该位置来讨论根据链接加载哪个组件。
<Router>
<Switch>
<Route path={"Your Path"} component={"You Component"} />
</Switch>
<Router>