useParams返回的值不是已经定义了吗

Question

假设使用

useParams()

并访问正确的值（路径）。

useParams

返回的值不是已定义的吗？

// URL: /user/:userId, current URL is /user/100
const { userId } = useParams()
// userId is 100

但是

userId

的类型是

string|undefined

。为什么未定义？

这是我的猜测，

useParams()

只是读取 URL 字符串并解析它。 它没有单独的循环。它不是异步的，因此，未定义类型会假设接近错误路径参数的情况。

所以我声明了正确的参数，它们不是未定义的。

Answer 1

假设您有一条没有路线路径参数的路线，

path="/segment1/segment2"

，那么

useParams

钩子将返回一个没有路线路径参数的空对象，例如其中

userId

未定义。

import { useEffect } from "react";
import { Routes, Route, Link, useParams } from "react-router-dom";

const Component = () => {
  const { userId } = useParams();

  useEffect(() => {
    console.log({ userId });
  }, [userId]);

  return (
    <>
      <h1>Component</h1>
      <div>userId: {userId ? userId : "undefined"}</div>
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/user/100">User 100</Link>
        </li>
        <li>
          <Link to="/segment1/segment2">Segment1 / Segment 2</Link>
        </li>
      </ul>

      <Routes>
        <Route path="/user/:userId" element={<Component />} />
        <Route path="/segment1/segment2" element={<Component />} />
      </Routes>
    </div>
  );
}

在 Typescript 中，如有必要，您可以强制转换参数：

const { userId } = useParams() as { userId: string };