我不明白为什么它会给我这个错误,这是因为我使用的是react路由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>

error in console

推荐答案

useMatch钩子需要一个路径模式字符串作为参数.这不是可选的.它还可能返回null,因此无论如何都要对其使用保护子句/null判断.

如果您试图构建子代"相对"路径,则不需要使用旧的v5模式,即使用match对象的pathurl值来生成嵌套的路由和链接,RRDv6路由和链接会自动完成此操作.这假设Router在ReactTree中呈现得比try 访问路由上下文的组件更高.

例子:

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"上有第二个后代路由,则that路由的组件将在路径"/foobar/barbar"上渲染.

Reactjs相关问答推荐

react 路由导航不工作,但手动路由工作

如何使用next.js以DOM为目标在映射中使用Ref

可选链和useState挂钩

如何在关闭和打开此 Select 输入时应用旋转效果?

为多租户SSO登录配置Azure AD应用程序

获取更改后的状态值

错误:无法获取 RSC 负载.返回浏览器导航

如何使用服务器中的数据自动填充表单字段?

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

useState数组不更新

cypress `cy.now()` Type 'Promise' 没有调用签名

将 clerk 与 supabase 集成的最佳实践

使用 axios 响应路由 Dom 操作

RTK 查询Mutations 在 StrictMode 中执行两次

如何检索包含动态段的未解析路径?

如何在 Cypress E2E 的站点上测试react 组件?

React LinkProps 的含义

在 Nextjs 中使用 useEffect 随机化一个数组

推送数组数据来渲染视图?

设置该状态后,无法设置与状态react 不同的状态