react-router-dom v6如何给类组件传递路由参数？

Question

请问react-router-dom v6如何给类组件传递路由参数？谢谢

Answer 1

基本一致，改动部分如下：

<Route path="/detail/:id" element={<Detail />} />

跳转方式：

import { useNavigate } from "react-router-dom";

const route = ()=> {
  let navigate = useNavigate();
  navigate('/detail/6')
}

因为 v6 版本完全用 hooks 重写，官网也没有 class 组件的使用案例。我从 issues 里找到一个方案，用函数组件包裹类组件，再将属性向下传递：

import { useNavigate, useParams } from "react-router-dom";

const WrapComps = (props)=> {
  let navigate = useNavigate();
  let params = useParams();
  let Element = props.el
  return <Element params={params} navigate={navigate} {...props} />
}

然后组件就可以这样用：

<Route path="/detail/:id" element={<WrapComps el={Detail} />} />

Answer 2

// 定义路由
<Route path="/about" element={<About />}>
      <Route path=":a" element={<About />} />
</Route>

// 跳转到路由 & 传参
<Link to="/about/1" style={{ padding: 5 }}>
     About
</Link>

// 获取参数
console.log(window.location)

虽然this.location不能用，但可以用window.location。
不过最好还是用react-router-dom v5 吧，v6文档不完善。

Answer 3

可以参考这个：
如何在类中从react-router-dom v6中获取参数值？
React Router v6中已弃用库提供的HOC withRouter。如果您需要使用v6并使用基于类的React组件，那么您将需要编写自己的HOC，它使用*钩子包装v6。

例如：

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

如果您有大量需要迁移到v6的代码库，但还没有将所有基于类的组件迁移到函数式组件中，这将非常有用。

这是基于本期Github中声明的开发团队的建议：https://github.com/ReactTrain...