react-router-dom ^6.0.0 怎樣動態跳轉頁面以及傳遞參數


前因:
react-router-dom ^6.0.0  移除了 useHistory 這個Hook, 以至於動態跳轉頁面變得困難。
幸好提供了 useNavigate 這個新的hook.

例子:

import { useNavigate } from 'react-router-dom';
// 在組件里面
const navigate = useNavigate();
// 通過navigate() 跳轉頁面,參數可以放在state里。
navigate('/your-route-path', { state: { object: object}});
// 下個頁面獲取state.
import { useLocation } from 'react-router-dom';
let location = useLocation();
const { object } = location.state;

這樣就可以實現頁面帶參數的動態的跳轉。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM