React-router-dom拿不到url parameter

Question

老师, 请问取页面路由参数的时候, 这些方法都不好使:

1. 您课程中提到的this.props并不包括.match这个属性
2. 问答中, 您提到可以用withRouter, 使用时出现下列的错误:
   
3. 如果用useParams, 也有错误: 只能用在function component, 不能用在class component

请问现在的react-router-dom, 应该用什么方式拿url parameter呢?

谢谢老师

Answer 1

04207214adai 2022-03-02 11:44:01

react-router-domV6中弃用了库提供的HOC(withRouter)，如果想要使用这个功能，我们需要自定义withRouter。本身V6版本中提供的这些功能是基于函数式组件的，如果想要在类组件中使用，可以自定义HOC。代码如下：

export function withRouter( Child ) {
  return ( props ) => {
    const location = useLocation();
    const navigate = useNavigate();
    return <Child { ...props } navigate={ navigate } location={ location } />;
  }}

参考链接：https://cloud.tencent.com/developer/ask/sof/296970

或者还有个办法，将"react-router-dom"的版本进行回退，回退到V5.x版本，相应的问题就能得到解决

• Dell #1

  楼上正解

• hahaha225 #2

  感觉回答了一半, 如果能结合课程代码详细点就好了