Передача данных через но становится неопределенным с помощью React Router в React

Question

Я пытаюсь передать некоторые данные из одного компонента в другой, используя <Link />. Я не могу передать какие-либо параметры в мой URL, поэтому прошу прощения за это решение. Ниже приведены примеры файлов моей проблемы:

App.jsx

<BrowserRouter>
  <Router history={history}>
    <Route exact path={'/my-dashboard/first-page'} component={FirstComponent}/>
  </Router>
</BrowserRouter>

LinkingComponent.jsx

const LinkingComponent = ({ data }) => {
  return (
    <Link
      to={{
        pathname: '/my-dashboard/first-page',
        state: { userDetails: data }
      }}
    >
      {data.firstName}
      &nbsp;
      {data.lastName}
    </Link>
  );
};

FirstComponent.jsx

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;
  console.log('user-detail', userDetails);
 ....
 some data manipulations
 ....
}

Здесь FirstComponent напрямую не связан или не связан с LinkingComponent. Я использую LinkingComponent в своей панели и передаю свои «данные» туда. Он получает его правильно в LinkingComponent. Но почему-то всякий раз, когда я пытаюсь получить к нему доступ в моем FirstComponent, он выдает ошибку, что он не определен. Я уже пробовал разные решения и читал разные статьи, но не смог найти подходящего решения.

Пожалуйста, помогите мне с решением здесь. ТИА.

Answer 1

Здесь Я создал небольшой пример. Играй с ним.

Answer 2

1. Во-первых, избавьтесь от Router или BrowserRouter, потому что Router обычно просто псевдоним для BrowserRouter. Ниже приведен импорт, который вы можете увидеть:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

И тогда ваш App.jsx будет выглядеть так:

<Router>
   <Route exact path={'/my-dashboard/first-page'} component={FirstComponent}/>
</Router>

Во-вторых, это серьезно неправильно:

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;
  console.log('user-detail', userDetails); // <- Seriously wrong!
  return <div>FirstComponent</div>;
}

Хотя FirstComponent - это функция, это не обычная javascript функция, а Реагирующий функциональный компонент ! Вам нужен метод жизненного круга (componentDidMount), чтобы увидеть userDetails реквизит.

Предполагая, что вы знаете хуки, ваш FirstComponent будет выглядеть так:

import { useEffect } from "react"

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;

  useEffect(() => {
     console.log({ userDetails }); // <- Better console.log with Object
  }, []) // <- empty dependency = componentDidMount

  return <div>FirstComponent</div>;
}

Кроме того, вам нужно обернуть FirstComponent withRouter HO C, который предоставляется response-router, чтобы получить реквизит location в ваших реквизитах FirstComponent.