无法使用 react-router-dom 中的 useLocation 访问功能组件中的状态答案

【问题标题】：cant access the state in a functional component with useLocation from react-router-dom无法使用 react-router-dom 中的 useLocation 访问功能组件中的状态
【发布时间】：2021-07-26 01:25:40
【问题描述】：

我正在尝试访问通过 NavLink 传递给组件的状态属性，但我无法让它工作。我读到它就像使用 useLocation 访问状态一样简单，但我认为 typescript 不喜欢这样。

以下代码：

import React from "react";
import "./project.css";
import Toolbar from "../navigation/toolbar";
import Footer from "../footer/footer";
import projects from "../projectsSection/projects";
import { useLocation } from "react-router-dom";

interface ProjectProps {
  projectId: number;
}
const Project: React.FC = (props) => {
  const { state } = useLocation();
  const { projectId } = state;

  const project = projects.find((project) => project.id === projectId);

  return (
    <section className="project-main">
      <Toolbar />
      <div></div>
      <Footer />
    </section>
  );
};

export default Project;

知道如何在类似的设置中访问状态吗？我收到一条错误消息：“未知”类型上不存在属性“projectId”

【问题讨论】：

我认为你需要在useLocation钩子中添加一个泛型类型，让TS知道你正在使用哪种类型。

标签： reactjs typescript react-router

【解决方案1】：

你需要给useLocation添加一个泛型类型：

const { state } = useLocation<{projectId: string}>();

【讨论】：