记录一下自己在学习React中，遇到的路由传参问题
一， 首先我使用的是Link标签跳转路由，并携带了一个参数。
PlainBashC C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<Link to={`/songListInfo/参数`}><Link>
二，在路由配置文件中path路径后添加 /:id （id:自定义的参数名）
PlainBashC C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
{
path: "/songListInfo/:id",
component: <SongListInfo />,
exact: false,
}
三， 路由跳转之后，发现一个问题，并不能获取到传的参数，打印输出props之后发现为空；并不能获取传过来的值。
经过我坚持不懈的尝试和百度，终于发现问题所在：react-router-dom版本问题！！！在v6版本中移除了Redirect组件，switch组件，withRouter等。不能V5版本中那样从this.props中获取路由组件的相关参数了。你如果打印一下props就会发现，props中毛都没有。
四，好的，接下来再来看在v6版本中如何处理这个问题。
PlainBashC C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
import React, { Component } from 'react'
import {
useParams,
} from 'react-router-dom'
// v6使用class组件。需要封装一下。利用hoc组件来获取参数，然后传递给class组件
function myWithRouter(Detail) {
return (props) => {
return <Detail {...props} params={useParams()} />
}
}
class songListInfo extends Component {
constructor(props){
super(props);
console.log(this.props.id);//获取到了值
}
render() {
return (
<div>
{this.props.params.id}
</div>
);
}
};
export default myWithRouter(songListInfo); //调用方法
上面代码中定义了一个myWithRouter函数组件并将Detail组件传入，在myWithRouter中获取useParams以及相关props，直接传递给Detail组件使用。这样我们就可以在Detail组件中成功的获取到params参数了。
当然上面不是最好的写法。我们直接用函数组件不是更好么。都不需要再进行在外面封装一层了。当然这里对于高阶组件不进行过多探讨，高阶组件目前是React官方推荐的编码方式哦。后续在继续学习吧；访问原文地址。
五，如果是函数组件的params参数传递，在V6版本这样接收参数。原文地址
PlainBashC C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
//路由链接(携带参数)：
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>有何不可</Link>
//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link>
//注册路由(声明接收)：
<Route path="/b/child1/:id/:title" element={<Test/ >} />
//接收参数：接收参数的组件一定要是函数式声明的（class不可以）！！！
import { useParams } from "react-router-dom";
const params = useParams();
//params参数 => {id: "01", title: "许嵩"}
