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 如下所示：< / p>

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的{{1}}对象传递到Link to吗？现在，我得到ProjectDetails.js的定义是不确定的（很明显，因为我没有将任何细节传递给组件）。

Answer 1

您需要在此处使用mapStateToProps。并将组件包装在conncet中的react-redux中。

应为：

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

通过路由反应传递对象？

3 个答案: