在React中使用 react-router-dom 編程式路由導航的正確姿勢【含V5.x、V6.x】

react-router-dom 編程式路由導航 (v5)

1.push跳轉+攜帶params參數

props.history.push(`/b/child1/${id}/${title}`);

2.push跳轉+攜帶search參數

props.history.push(`/b/child1?id=${id}&title=${title}`);

3.push跳轉+攜帶state參數

props.history.push(`/b/child1`, { id, title });

4.replace跳轉+攜帶params參數

this.props.history.replace(`/home/message/detail/${id}/${title}`)

5.replace跳轉+攜帶search參數

this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

6.replace跳轉+攜帶state參數

this.props.history.replace(`/home/message/detail`, { id, title });

7.前進

this.props.history.goForward();

8.回退

this.props.history.goForward();

9.前進或回退 ( go )

this.props.history.go(-2); //回退到前2條的路由

在一般組件中使用編程式路由導航 (非路由組件)

import {withRouter} from 'react-router-dom'

class Header extends Component {
// withRouter(Header)后，就可以在一般組件內部使用 this.props.history 
//...
}

export default withRouter(Header)

react-router-dom 編程式路由導航 (v6)

// v6版本編程導航使用 useNavigate (以下為引入代碼)
import { useNavigate } from "react-router-dom";
export default function A() {
const navigate = useNavigate();
//...
}

1.push跳轉+攜帶params參數

navigate(`/b/child1/${id}/${title}`);

2.push跳轉+攜帶search參數

navigate(`/b/child2?id=${id}&title=${title}`);

3.push跳轉+攜帶state參數

navigate("/b/child2", { state: { id, title }});

4.replace跳轉+攜帶params參數

navigate(`/b/child1/${id}/${title}`,{replace: true});

5.replace跳轉+攜帶search參數

navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});

6.replace跳轉+攜帶state參數

navigate("/b/child2", { state: { id, title },replace: true});

為您推薦相關文章:

• 深度解析 React useRef Hook 的使用 ！https://juejin.cn/post/7042583468152356871
• 最簡潔的 Mbox 6.x 基本使用步驟介紹（僅三步）！！！https://juejin.cn/post/7041103984219652133
• (干貨) 全網最全 react-router-dom v6.0學習指南（新特性深入解讀、持續更新...）！！！https://juejin.cn/post/7040289734836355085
• （原創）深入解讀s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的問提https://juejin.cn/post/7039237659574665247
• React中使用 react-router-dom 路由傳參的三種方式詳解【含V5.x、V6.x】！！！https://juejin.cn/post/7042849947451916296