React JS, Router - компонент рендерится только после перехода по ссылке

Question

Мне интересно, как решить проблему с рендерингом компонентов ... Представьте себе ситуацию:

У меня есть 4 поля на странице, и щелчок каждого поля вызывает перенаправление на другую страницу.

В каждом поле есть разные данные, которые я передаю, например:

        <Link
          to={{
            pathname: '/someurl/' + sometitle + '/' + someid,
            state: {
              title,
              description,
              purpose}}} > 
               <div></div> 
         </Link>

После щелчка каждого поля все идет нормально - я получаю страницу с данными в зависимости от того, в каком поле я щелкнул. Пример URL-адреса выглядит так: localhost / someurl / sometitle1 / someid1.

Проблема в том, что я пытаюсь go перейти по этой ссылке прямо из панели поиска ... Конечно, я знаю, почему - все данные передаются при нажатии на поле, поэтому, если нет щелчка, там нет данных ...

Я просто не знаю, как это решить: /

Есть идеи?

Answer 1

Чтобы реализовать решение, при котором при переходе по ссылке на странице вы можете отображать данные непосредственно на ней, вы должны убедиться, что вся информация, относящаяся к странице, уже находится в URL-адресе или может быть получена из url

Например, вы можете игнорировать отправку данных как состояния в RouteComponent, но получать данные на основе urlParams, someTitle и someId.

Предполагая, что ваш Маршрут настроен как

<Route path="/someurl/:title/:id" component={Component}/>

Вы можете написать свой Component как

const Component = ({match}) => {
   const {title, id} = match;
   const [data, setData] = useState({});
   useEffect(() => {
       // fetchData based on title and id and update state
   }, [title, id]);
   ...
}

PS Если вы не используете хуки, вы можете преобразовать eh выше useEffect и useState logi c в состояние и функции жизненного цикла componentDidUpdate / componentDidMount для класса component