React useNavigate传参直访路由报Cannot read properties of null错误

useNavigate 跳转时传入的 state 是 React Router 存储在浏览器历史记录栈内存中的临时状态，不会被编码到URL中，仅在路由主动跳转的上下文里存在。
当你直接在地址栏输入https://localhost/books访问、或者刷新书籍页面时，没有经过Categories组件的跳转传参流程，此时useLocation()返回的location对象中state字段的默认值为null，直接执行location.state.name相当于读取null的name属性，就会触发你看到的类型错误。

根据业务场景选择对应方案即可，核心是避免直接读取可能为null的state上的属性：

• 方案1：空值兜底（适配绝大多数场景）
  读取属性时通过可选链和空值合并运算符做降级处理，设置默认分类值：

  import {useLocation} from "react-router-dom";
  function Books() {
    const location = useLocation();
    // state不存在时默认返回“全部分类”，可根据业务替换默认值
    const currentcategory = location.state?.name ?? "全部分类";
    // 后续业务逻辑
  }
  

  如果项目环境不支持ES2020语法，也可以写成兼容写法：

  const currentcategory = location.state ? location.state.name : "全部分类";
  

• 方案2：无参数时重定向
  如果业务规则要求必须选中分类才能访问书籍页，检测不到传参时直接跳回分类选择页即可：

  import {useLocation, Navigate} from "react-router-dom";
  function Books() {
    const location = useLocation();
    // 没有传分类参数时重定向到分类页
    if (!location.state?.name) {
      return <Navigate to="/categories" replace />
    }
    const currentcategory = location.state.name;
    // 后续页面渲染逻辑
  }
  

• 方案3：参数持久化到URL（适配需要分享、直接访问的场景）
  如果需要支持用户直接输入URL、刷新页面、分享链接都能正常打开对应分类页，就不要用内存state传参，把参数放到URL的查询串或路径中：

  1. 修改Categories组件的跳转逻辑，把分类名拼到URL上：

  // 注意对参数做URL编码，避免特殊字符导致地址异常
  onClick={() => navigate(`/books?category=${encodeURIComponent(categorie.name)}`)}
  

  2. 修改Books组件的参数读取逻辑，从URL查询参数中取值：

  import {useSearchParams} from "react-router-dom";
  function Books() {
    const [searchParams] = useSearchParams();
    const currentcategory = searchParams.get("category") ?? "全部分类";
    // 后续业务逻辑
  }
  

内容的提问来源于stack exchange，提问作者AAK