Question

我想检索组件外部的当前参数，据我所知，React Router没有提供方便的方法。

在0.13之前的某个时间，路由器有了getCurrentParams（）这就是我以前使用的。

现在我能想到的最好的事情是：

// Copy and past contents of PatternUtils into my project
var PatternUtils = require('<copy of PatternUtils.js>')

const { remainingPathname, paramNames, paramValues } =
   PatternUtils.matchPattern(
       "<copy of path pattern with params I am interested in>",    
   window.location.pathname);

有没有办法用React路由器做到这一点？

Answer 1

您可以使用matchPath：

import { matchPath } from 'react-router'

const { params }= matchPath(window.location.pathname, {
   path: "<copy of path pattern with params I am interested in>"
})

Answer 2

如果您在渲染函数中使用 matchPath(window.location.pathname, ...)，您的组件将不会在路由更改时发出重新渲染的信号。您可以改为使用 react router 的 useLocation 钩子来解决此问题：

import { matchPath } from 'react-router'
import { useLocation } from 'react-router-dom'

function useParams(path) {
    const { pathname } = useLocation()
    const match = matchPath(pathname, { path })
    return match?.params || {}
}

function MyComponent() {
    const { id } = useParams('/pages/:id')
    return <>Updates on route change: {id}</>
}

注意：对于不匹配的路径，matchPath 将返回 null。
如果您使用对象解构模式 { params } = matchPath，它可能会抛出以下错误：
Cannot destructure property 'params' of 'Object(...)(...)' as it is null.

获取组件外的参数

2 个答案: