代码之家 › 专栏 › 技术社区 › gene b.

用<Router>反应路由器交换机。</Router>块(带有props的组件)无法读取带有“props.match.params”的URL参数

react-router-dom react-router reactjs

0

gene b. · 技术社区 · 5 年前

当我用老式的方式,用一个简单的 component={MyComponent} 在我的交换路径中,我可以用 props.match.params . 这很好:

容器:

<Switch>
  <Route path="/newAgreement/:type" component={NewAgreement} /> 
</Switch>

export default function NewAgreement(props) {
    return (
        <div>
           TYPE: {props.match.params.type} <-- THIS WORKS
        </div>
    );
}

现代的反应路由器可以让你通过 自定义属性 <Route>..</Route> ,这在旧方法中是不可能的。我需要传递自定义属性,所以我的交换路由看起来像

<Switch>
    <Route path="/newAgreement/:type">
       <NewAgreement userInfo="someCustomProperty" />    
    </Route>
</Switch>

新方法在我没有指定任何 : 和一 URL参数,它开始中断,错误如下:

TypeError: Cannot read property 'params' of undefined

那么如何在 < 阻止我的组件,并获得 :... URL参数?

1 回复 | 直到 5 年前

1

Tolumide 5 年前

在您声明 NewAgreement 这样做;

import React from "react"
import {useParams} from "react-router"


const NewAgreement = () => {
   const params = useParams();
   console.log(params.id)

   return (
    <>
    ...
    </>
   )
}

你可以在网上找到更多的信息 documentation