Можно ли передавать реквизит по совпадению в React Link - PullRequest
Новая
       21

Можно ли передавать реквизит по совпадению в React Link

1 голос
/ 01 марта 2020

Я передаю реквизиты одному и тому же компоненту двумя разными способами.

Один раз по пути маршрута: - 

<Route path="/CreateProfile/:title" exact component={ProfileForm} />

Другой по ссылке как: 

<Table.Cell><Link to={{  // it will land to the same component ProfileForm
pathname:  "/EditProfile",
props: {
profile : profile,
title: "Edit Profile" 
}
}} >Edit Profile</Link></Table.Cell>

В своей ProfileForm я пытался читать реквизиты как: - 

useEffect(() => {

  if(props.match.params.title){ // it gives no error. 
    setTitle(props.match.params.title);
  }else if(props.location.props.title){ // gives error .props.title undefiened 
    setTitle(props.location.props.title);
  }
  // if(props.match.params.profile){
  //   setProfile(props.location.state.profile)
  // }
  if(props.location.props.profile){
    setProfile(props.location.props.profile)
    console.log("profile: "+props.location.props.profile)
  }
}

else if(props.location.props.title) выдает ошибку, когда приходит от маршрутизатора. Ожидается, потому что я установил реквизит по ссылке. Я заметил, что props.match.params.title никогда не выдает никакой ошибки, независимо от того, установлена ​​она или нет. Так что я буду sh передавать реквизиты по совпадению из Link, чтобы и Route, и Link работали правильно. Можно ли передавать реквизит к матчу? Или как мне решить эту проблему?

1 Ответ

0 голосов
/ 02 марта 2020

Вы можете передавать данные через путь (URL), то есть через сопоставление URL или параметры запроса, или через состояние маршрута.

Ссылка на объект

Объект, который может иметь любое из следующих свойств:

  • pathname: строка, представляющая путь к ссылке.
  • search: Строковое представление параметров запроса.
  • га sh: га sh для вставки в URL, например # a-ha sh.
  • состояние: состояние для сохранения в местоположении.

У вас явно есть настройка маршрута для варианта pathname с параметром маршрута title. 

"/CreateProfile/:title"

Вам просто нужно создать ссылку, чтобы в нее было встроено правильное значение title. 

<Link to={{ pathname: "/CreateProfile/<some title value>" }} >
  Create Profile
</Link>

Отсюда вам нужен только доступ к маршруту match.params.title, поскольку вы правильно сделано.

Теперь , в случае редактирования профиля маршрута, "/EditProfile" есть, OF C, нет параметра соответствия маршрута (и нет параметров запроса), поэтому правильный способ заключается в использовании состояния маршрута. 

<Link
  to={{
    pathname: "/EditProfile",
    state: {
      profile,
      title: 'Edit Title',
    },
  }}
>
  Edit Profile
</Link>

и правильном доступе к состоянию маршрута из history объекта 

useEffect(() => {
  const { history, match } = props;

  if (match.params.title) { 
    setTitle(match.params.title);
  } else if (history.location.state.title){
    setTitle(history.location.state.title);
  }

  if (history.location.state.profile) {
    setProfile(history.location.state.profile)
    console.log("profile: ", history.location.state.profile)
  }
}

Совет по поводу состояния маршрута, однако путь к объекту не t всегда гарантированно существует (т. е. определяется) от props.history.location до конечного значения, к которому вы обращаетесь, поэтому необходима защита, чтобы предотвратить ошибки «access blah of undefined». 

 // state may not be defined depending on which route the app took to get to the page
history.location.state && history.location.state.title
...