代码之家 › 专栏 › 技术社区 › siddhant kumar

Can'读取未定义的属性(读取“path”)

react-router reactjs

siddhant kumar · 技术社区 · 2 年前

代码:

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>

1 回复 | 直到 2 年前

Drew Reese 2 年前

这个 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" .