小编mic*_*er2的帖子

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

我设置路由为：

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 …