Блог

У меня проблема, когда, когда я начинаю с корня и щелкаю по ссылкам, все состояния загружаются нормально, но когда я копирую и вставляю URL-адрес в новое окно, он не отображается, правильно ли я предполагаю, что это потому, что предыдущий компонент не отображается для установки состояния?

Надеюсь, кто-нибудь может указать мне на несколько полезных статей или даже испытал это раньше?

Вот ссылка на запись экрана, которую я сделал, чтобы лучше показать, что я имею в виду https://youtu.be/M0390D4oJDg

код

 import React from "react";
import { useLocation, useParams } from "react-router";
import PostBlock from "./PostBlock";




const PostList = () => {
  const {thread} = useParams()
  const { state: { description, title } = {} } = useLocation();

  return (
    <div>
      <div className="m-10 flex justify-center">
        <div style={{ width: "1216px" }}>
          <div className="flex justify-center">
            <div className="flex-1 justify-center mb-5 p-5 h-64 border border-gray-300">
              <div>{title}</div>
              <div>{description}</div>
            </div>
          </div>
          <table className="min-w-full table-auto">
            <thead className="justify-between">
              <tr className="bg-gray-800">
                <th className="px-8 py-2 text-left text-white">Posts</th>
              </tr>
            </thead>
            <tbody className="bg-gray-200">
              <PostBlock thread={thread}/>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default PostList;
 

Ссылка

  <Link to={{ pathname: `/thread/${thread}`, state: {title: title, description: description} }}>
 

URL

 http://localhost:3000/thread/jxvgOKPrSiCnI2ocDxgJ
 

Этот реагирующий материал сложнее, чем я изначально думал

Не сдавайтесь легко. Это одна из прекрасных вещей!

Начните с необязательной цепочки.

 const title = useLocation()?.state?.title;
const description = useLocation()?.state?.description;
 

Если это не поддерживается, используйте amp;amp; :

 const title = useLocation() amp;amp; useLocation().state amp;amp; useLocation().state.title;
const description = useLocation() amp;amp; useLocation().state amp;amp; useLocation().state.description;
 

И только тогда, когда title и description нет null , визуализируйте свое содержимое.

 const PostList = () => {
  const { thread } = useParams();
  const title = useLocation() amp;amp; useLocation().state amp;amp; useLocation().state.title;
  const description = useLocation() amp;amp; useLocation().state amp;amp; useLocation().state.description;

  return title amp;amp; description ? <div></div> : null;
};
 

Теперь код не будет отображать содержимое до тех пор, пока не будут установлены оба значения. И это гарантирует, что ваш код загружается без каких-либо ошибок.

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

 const PostList = () => {
  const { thread } = useParams();
  const { state: { description, title } = {} } = useLocation();

  return <div></div>;
};
 

Нет никаких причин для useLocation() повторной инициализации. Вы могли бы также инициализировать его в одну константу, а затем получить доступ к описанию и состоянию через него.

 const PostList = () => {
  const { thread } = useParams();
  const location = useLocation();

  console.log(location.state.title, location.state.description);

  return <div></div>;
};
 

Кроме того, вы можете включить object?.property метод в качестве отказоустойчивого, если ваше состояние пустое:

console.log(location?.state?.title);

Взгляните на правильное useLocation использование здесь