为什么 useMatch 在 React 路由器中不起作用？

Question

我正在学习如何使用useMatch()我"react-router-dom" 收到以下错误并且我的网页为空白：

Uncaught TypeError: Cannot read properties of undefined (reading 'path')
    at matchPath (index.tsx:1148)
    at index.tsx:481
    at mountMemo (react-dom.development.js:15846)
    at Object.useMemo (react-dom.development.js:16219)
    at useMemo (react.development.js:1532)
    at useMatch (index.tsx:481)
    at About (About.js:7)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)

我的代码如下

import React from "react"
import { useMatch  } from "react-router-dom"
import { Link, Route } from "react-router-dom"
import SinglePage from "./SinglePage"

const About = () => {
  const { url, path } = useMatch()
  console.log("hello usematch!", useMatch())
  return (
    <div>
      <ul>
        <li>
          <Link to={`${url}/about-app`}>About App</Link>
        </li>
        <li>
          <Link to={`${url}/about-author`}>About Author</Link>
        </li>
      </ul>
      <Route path={`${path}/:slug`}>
        <SinglePage />
      </Route>
    </div>
  )
}
export default About

下面是index.js我们进入“关于”页面的文件：

import React from "react";
import ReactDOM from "react-dom";
//component file
import TodoContainer from "./functionBased/components/TodoContainer";
import { Route, Routes, BrowserRouter as Router } from "react-router-dom";


//stylesheet
import "./functionBased/App.css";
import About from "./pages/About";
import NotMatch from "./pages/NotMatch";
//stylesheet
// import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <>
        <Routes>
          <Route exact path="/" element={<TodoContainer />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<NotMatch />} />

        </Routes>
      </>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

我尝试过浏览 api文档，但不清楚为什么这不起作用以及如何加载页面。我试图在调用它的上下文中返回最近的当前路由匹配。

我对 React 和 API 还很陌生router。

非常感谢

Answer 1

在react-router-domv6中，useMatch钩子需要一个必需的值，该值是表示路径 或对象pattern的字符串。PathPattern

使用匹配

declare function useMatch<ParamKey extends string = string>(
  pattern: PathPattern | string
): PathMatch<ParamKey> | null;

路径模式

interface PathPattern {
  path: string;
  caseSensitive?: boolean;
  end?: boolean;
}

据我所知，您似乎正在尝试使用 v5 中使用的相同模式构建“嵌套”路由。这在 v6 中不起作用，因为 v6 可以通过不指定以 . 开头的绝对路径来利用相对链接/路由"/"。

请参阅v5 迁移指南中的相对路由和链接。

应用相对链接/路由：

const About = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Route path=":slug">
        <SinglePage />
      </Route>
    </div>
  )
}

react-router-domv6 现在也始终使用精确路径匹配，因此为了确保Route可以匹配和渲染任何嵌套组件，您应该更新较低的路径以允许子路由匹配。如果"/about"正在渲染子路由，则附加通配符匹配器。

应用程序

<Router>
  <Routes>
    <Route exact path="/" element={<TodoContainer />} />
    <Route path="/about/*" element={<About />} />
    <Route path="*" element={<NotMatch />} />
  </Routes>
</Router>