Question

我有新的反应，所以请善待并忍受我：D

这是我的问题：

我有一些正在生成的projectItem个组件，并且所有组件都链接到有关该项目的projectDetail页面，如下所示：

render() {
    return (
      <Link to="/projectDetail" >
        <div className="projectItem">
          <h1>{this.props.name}</h1>
          <LazyLoad height={400} offsetTop={0} imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }} />
         </div>
        </Link>
    );
  }

和位于app.js中的我的路线是这样的：

<Route path="/projectDetail" component={ProjectDetail} />

现在，我想将一些属性发送到projectDetail页面，以便我可以判断单击了哪个projectItem，我该怎么办？

Answer 1

你不能通过传递道具来做到这一点，或者至少它是有史以来最糟糕的做法！您想将一些pk（主键）或rk或slug传递给详细视图。考虑像这样制作一个urls变量：

const urls = {
  frontend: {
    project: {
      list: () => '/projects/',
      details: (pk) => `/projects/detail/${pk ? pk : ':pk:'}`,
    }
}

并在你的路线中，做这样的事情：

<Route path={urls.frontend.details()} exact component={ProjectDetail} />

当您想在链接中使用此路径时，请执行以下操作：

<Link to={urls.frontend.details(<your_pk_here>)} >
  <YourContent>
</Link>

Answer 2

您可以通过简单的方式执行此操作：

    <Link to="projectDetail" params={{ testvalue: "hello" }}>Your link</Link>

或

    <Link to="projectDetail/hello">Your link</Link>

和

    <Route name="projectDetail" path="/:testvalue" component={ProjectDetail}/>

通过您的CreateIdeaView类中的this.props.params.value获取此内容。

Answer 3

您可以使用以下代码传递projectID或其他任何内容

render() {
  return (
    <Link to={{
      pathname: '/projectDetail',
      state: { projectID: ID }
    }}>
      <div className="projectItem">
        <h1>{this.props.name}</h1>
        <LazyLoad height={400} offsetTop={0} imageProps={{
          src: this.props.thumb,
          alt: this.props.name,
          ref: "image",
        }} />
        </div>
      </Link>
  );
}

然后，您可以使用location.state.projectID来访问它。

Answer 4

您可以使用如下所示的链接组件，您可以将其用作参考https://reacttraining.com/react-router/web/api/Link

render() {
    return (
      <Link to={{pathname: '/projectDetail',state: { //state to persists} }}>
        <div className="projectItem">
          <h1>{this.props.name}</h1>
          <LazyLoad height={400} offsetTop={0} imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }} />
         </div>
        </Link>
    );
  }

反应链接发送道具

4 个答案: