реагировать ссылка отправить реквизит

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

Вы можете использовать компонент «Ссылка», как показано ниже, вы можете использовать его как ссылку 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>
    );
  }

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

, чтобы получить это через this.props.params.value в вашем классе CreateIdeaView.

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

Вы не можете сделать это, передавая реквизит, или, по крайней мере, это как худшая практика!Вы хотите передать некоторый 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>