javascript - 通过路由 react 传递对象？

Question

我想要做的是设置路由到我的对象。例如:

我为以下设置路由:

http://localhost:3000/projects

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

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

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;

我有 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;

你能告诉我，如何传递project的对象吗？来自 Link to进入 ProjectDetails.js ?现在，我得到 description未定义(这是显而易见的，因为我没有将任何内容传递给带有详细信息的组件)。

Answer 1

在您的 route 使用渲染方法并传递 Prop 。

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