Question

无法读取未定义的属性（读取‘路径’）

2022-07-30

1042

reactjs react-router

我不明白为什么它会给我这个错误，这是因为我使用的是 React Router V6。有人可以看看这个并告诉我是否遗漏了什么吗？这是代码：

代码：

import { useParams, useMatch, Route, Routes, BrowserRouter as Router } from 'react-router-dom';

const {id} = useParams();
const [book, setBook] = useState(null);
const match = useMatch();

<Router>
            <Routes>
                <Route path={`${match.path}/`}>
                <h4>{book && book.title}</h4>
                </Route>
             
            </Routes>
        </Router>

Answer 1

useMatch 钩子需要将路径模式字符串作为参数。它不是可选的。它还可能返回 null ，因此无论如何您都希望对其使用保护子句/null 检查。

如果您尝试构建后代“相对”路径，则无需使用旧的 v5 模式，即使用 match 对象的 path 和 url 值来生成嵌套路由和链接，RRDv6 路由和链接会自动执行此操作。这假定 Router 在 ReactTree 中的渲染位置高于尝试访问路由上下文的组件。

示例：

import { useParams, Route, Routes } from 'react-router-dom';

...

const { id } = useParams();
const [book, setBook] = useState(null);

<Routes>
  <Route
    path="/" // <-- renders on "/" relative to the current route pathname
    element={<h4>{book && book.title}</h4>}
  />
</Routes>

例如，如果上述组件的父组件在 "/foobar/*" 上渲染，则 <h4>{book && book.title}</h4> 也会在 "/foobar" 上渲染。如果在 "/barbar" 上有第二个后代路由，则该路由的组件将在路径 "/foobar/barbar" 上渲染。