使用USENAVITAIGE的React通过无法读取NULL的属性

Question

我正在使用USENAVITAITE将数据传递在组件之间。

import { useNavigate } from "react-router-dom";

function Categories() {
const navigate = useNavigate();
.
.
onClick={() => navigate("/books", {state:{ name: categorie.name }})}

然后，我从第二个组件中依靠其工作正常的数据

import {useLocation} from "react-router-dom";
function Books() {
const location = useLocation();
let currentcategory = location.state.name;

，但是如果我尝试使用URL https：// localhost/books直接访问

此错误，我会收到此错误

Uncaught TypeError: Cannot read properties of null (reading 'name')

Answer 1

问题

问题是，如果您从提供状态的组件过渡，则仅存在路由/链接/导航状态 。如果您在地址栏中手动输入接收路由的URL路径，则该状态丢失或未定义/空。

换句话说，location.state是未定义的/null，并且在进一步访问它以获取location.state.state.name时会抛出错误。

解决方案

使用null-Check/Guard-Clause或可选的链式操作员来防御潜在的无效访问，或者为破坏性提供后备价值。

• null-Check/guard-clause

    const {state} = uselocation（）;
  const CurrentCategory = state＆amp;＆amp; state.name;
   

• 可选的链接操作员

    const {state} = uselocation（）;
  const current category = state？.name;
   

• 从

  破坏的后备对象

    const {state} = uselocation（）;
  const {name：currentCategory} =状态|| {};
   

Answer 2

你需要破坏它

const {state} = useLocation();
console.log(state)