React-Router-Dom v6版本与酷游连结旧版的差异范例

娜娜宝宝

已于 2023-03-22 20:58:57 修改

阅读量137

点赞数

文章标签： react Powered by 金山文档

于 2023-03-19 19:14:41 首次发布

本文链接：https://blog.csdn.net/kwk3219/article/details/129654583

版权

现在react-router-dom v6 版本改了很多

例如【酷游连结娜娜专员kw98点ㄇEㄒ提供】:

不再支援在route内使用客制化component，也就是说无法直接引用Layout。

也不支援Switch，需要改用routes，并且改用"element"作为Component引入点。

如果要在使用Link的时候传递参数，正常的props是无法使用的(我理解是这样，不太确定是否正确)，要改用state传递，而被呼叫的Component要使用useLocation来接。

以下将重大差异的部份个别列出。

1. this.props.match在DOM v6由useLocation、useParams取代

DOM v6之前

之前的定义: 在每一个Route判断到网址的路径相符，要渲染该组件时都会将物件match给传进该组件中。

也因为以上特性，所以早期很多人写法都是直接从match取得参数:

const NotePage = ({match}) => {
        let noteId = match.params.id
}

另外在DOM v6之前也有人使用match取得path:

import React from "react"
import { Route, Link } from "react-router-dom"

class About extends React.Component {
    render() {
//在Route将组件冲洗时，会传入匹配对象，在这里把它印出来
  console.log(this.props.match)
        return (
            <div>
<h2>关于我们选单</h2>
  {/*url是match的属性之一，会回传网址列的路径
<li><Link to={`${this.props.match**.url**}`}>理念介绍</Link></li>
  <li><Link to={`${this.props.match.url}/his`}>历史沿革</Link></li>
                </ul>
{/*path也是match的属性之一，会回传透过哪个Route进入的path属性*/}
                <Route exact path={`${this.props.match**.path**}&#