Блог

Как говорится в названии, как отправлять данные реквизиту от одного компонента к другому по ссылке. Вот как я это делаю сейчас, но из-за этого URL-адрес в браузере становится слишком большим, и я чувствую, что это не так, как вы это делаете, но вот как я это сделал:

У меня есть один компонент, называемый Маршрутами.js, где я храню все свои маршруты вот так:

     {
    path: "/edit/:id/:name/:email/:status/:gender/:title/:method",
    component: ActionsPage,
    exact: true,
  },
 

Как вы можете видеть, этот путь становится слишком большим, так как они :name и т. Д. На самом деле являются моими параметрами, и в компоненте, в котором мне нужны эти реквизиты, Я поместил это:

 let { id, name, email, status, gender, title, method } = useParams();
 

Есть ли какой-либо другой способ отправить реквизит, например, давайте воспользуемся этим ActionsPage.js компонент, который я использую, могу ли я каким-то образом отправить эти реквизиты по-другому, или, если быть точным, отправить их нормально, как когда вы отправляете их без использования ссылки?

Вы могли бы просто передать несколько реквизитов Link из react-router .

В следующем примере toPathWithProps сохраняется как пункт назначения pathname , так и props то, что вы хотели бы передать. Здесь мы проходим param1 как props .

 // your link creation
const toPathwithProps = { 
  pathname: "/page", 
  param1: "Par1" 
};

// link to the "location"
<Link to={toPathwithProps}> </Link>
 

param1 будет найден в компоненте props назначения. Но помните, что если пользователь перейдет к /page без использования Link тега, » нет props » не будет передано.

Итак, допустим, компонент «меню» перенаправляет на страницу «редактировать» (страницу, которую вы упоминаете в своем вопросе). Для этого все, что вам нужно сделать, это добавить Link тег в свой компонент «меню». Пример:

     <Link to={
      pathname: "/edit", 
      user: {id:props.id,name:props.name,email:props.email}}>
      Edit Profile </Link>
 

Таким образом, пользователь просто нажимает на кнопку Link и переходит на страницу «редактировать». Компонент «редактировать» сможет получить доступ к user информации в своих реквизитах. Потому что мы проходили мимо них, как params в Link .

Теперь вам не нужно использовать полный путь /edit/:id/:name/:email/:status/:gender/:title/:method , который вы можете использовать просто /edit