React 通过路由传递对象？

Question

我想做的是将路由设置到我的对象。例如：

我设置路由为：

http://localhost:3000/projects

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

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

http://localhost:3000/projects/3

看起来如何：

当我单击“to”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;

我有ProjectsList.js组件（如果需要，我将包含它的代码），ProjectsList.js我有列表组，Project.js如下所示：

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>
    );
  }
}
export default Project;

通过Link to我的浏览器将我传递到正确的 URL（projects/2...等），但我不知道如何将对象传递project给ProjectDetails.js组件。其代码如下：

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

你能告诉我，如何将projectby对象传递Link to到 中ProjectDetails.js吗？现在，我得到的description是未定义的（这是显而易见的，因为我没有将任何内容传递给包含详细信息的组件）。

Answer 1

在路线中使用 render 方法并传递 props。

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