Javascript 通过路由对传递对象进行反应？

我要做的是设置对象的路由。例如：

我为以下各项设置路由：

http://localhost:3000/projects

它显示了我所有的项目列表（它工作得很好）

然后我想选择project并查看详细信息，但它无法正常工作：

http://localhost:3000/projects/3

它看起来是什么样子：

当我点击

Details

按钮时，它会将我发送到

/projects:id

，但我得到一个错误，

project

中的项目未定义

我的密码。我将所有路由存储在主

App.js

文件中：

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Route exact path="/projects" component={ProjectsList} />
            <Route exact path="/projects/:id" component={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

通过

链接到
我的浏览器将我传递到正确的URL（
项目/2…
等），但我不知道如何将
项目的对象传递到
项目详细信息.js组件。其代码如下：

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}
export default ProjectDetails;

类项目详细信息扩展组件{
render（）{
return
{this.props.project.description}
；
}
}
导出默认项目详细信息；

您能告诉我，如何通过
链接将
项目的对象
传递到
ProjectDetails.js
？现在，我得到的
描述
是未定义的（很明显，因为我没有向组件传递任何详细信息）。
您需要在这里使用
mapstatetops
。并从
react redux
将组件包装在
concet
中

应该是这样的：

import {connect} from 'react-redux';

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}

function mapStateToProps(state, ownProps){
   const projectInstance = DATA //the Data you are getting or fetching from the ID.
   return { project : projectInstance }
}

export default connect((mapStateToProps)(ProjectDetails))

从'react redux'导入{connect}；
类ProjectDetails扩展组件{
render（）{
return
{this.props.project.description}
；
}
}
函数mapStateToProps（状态，ownProps）{
const projectInstance=DATA//从ID获取的数据。
返回{project:projectInstance}
}
导出默认连接（（MapStateTops）（项目详细信息））
这就是它的样子

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}

function mapStateToProps(state, ownProps){
   return { project : { id: ownProps.params.id } }
}

export default connect((mapStateToProps)(Project))

类项目扩展组件{
render（）{
返回(
{this.props.project.name
细节
);
}
}
函数mapStateToProps（状态，ownProps）{
返回{project:{id:ownProps.params.id}
}
导出默认连接（（mapStateToProps）（项目））
在路线中使用渲染方法并传递道具

   <Route exact path="/projects/:id" render={() => (
         <ProjectDetails
         project = {project}
         />
   )}/>

(
)}/>
我投了反对票，如果我能知道，那就好了，因为什么？但是
Project.js
应该如何获得你提到的数据呢？
   <Route exact path="/projects/:id" render={() => (
         <ProjectDetails
         project = {project}
         />
   )}/>