通过路由反应传递对象？

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

在你的路由中使用 render 方法并传递 props。

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

Answer 2

这就是它的样子..!!

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))

Answer 3

您需要在这里使用mapStateToProps。并将您的组件包装在来自react-redux 的conncet 中。

应该是这样的：

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))