通过路由反应传递对象？

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;

你能告诉我，如何将 Link to 的 project 的对象传递给 ProjectDetails.js 吗？现在，我得到 description 未定义（这很明显，因为我没有向组件传递任何细节）。

Answer 1

这里需要使用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))

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

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

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

通过路由反应传递对象？

React pass object by routing?

javascript

reactjs

react-bootstrap

react-router

react-router-dom