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

Question

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

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

<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)выдает ошибку при поступлении от маршрутизатора. Это ожидаемо, потому что я установил реквизит с помощью Link. Я заметилprops.match.params.titleникогда не выдает ошибок независимо от того, установлен он или нет. Поэтому я хочу передавать реквизиты по совпадению из Link, чтобы и Route, и Link работали правильно. Можно ли передать реквизит по матчу? Или как мне решить эту проблему?

Answer 1

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

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

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

• pathname: строка, представляющая путь для ссылки.
• поиск: строковое представление параметров запроса.
• hash: хеш для вставки в URL, например # a-hash.
• состояние: состояние, которое будет сохраняться в этом месте.

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

"/CreateProfile/:title"

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

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

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

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

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

Совет по поводу состояния маршрута, однако, путь к объекту не всегда гарантированно существует (т. Е. Определен) из 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