<button onClick={()=>history.push("/page")}> Redirect </button>
/page 組件的代碼：
const[toggle,setToggle] = useState<boolean>(true);
return(
<div>{toggle? <Tab1Container /> : <Tab2Container />} </div>
)
/page 上有 2 個不同的選項卡，比如說 tab1 和 tab2，默認情況下，當您加載 /page 時，它??會顯示 tab1 組件。單擊按鈕時如何重定向到 tab2 組件？
uj5u.com熱心網友回復：
您可以使用 react-router-dom 中的 Link 和 useLocation 來實作您想要的結果。它可以用作：
您可以在按鈕所在的頁面上使用以下代碼。
import { Link } from 'react-router-dom'
<Link
to={{
pathname: '/page',
state: {
toggleValue: false
}
}}
>
<button onClick={()=>history.push("/page")}> Redirect </button>
</Link>
在頁面組件上
import {useLocation } from 'react-router-dom'
const location = useLocation()
const { toggleValue } = location?.state ?? {}
const[toggle,setToggle] = useState<boolean>(toggleValue);
return(
<div>{toggle? <Tab1Container /> : <Tab2Container />} </div>
)
此外，您可以在頁面加載時在 useEffect 掛鉤上設定工具值，并更改頁面上的選項卡使用 setToggle on handle 函式
uj5u.com熱心網友回復：
只需提升切換按鈕的 useState 或使用背景關系 api 或狀態管理庫..
從你的父組件..
將 SetToggle 作為道具傳遞給按鈕組件并將切換作為道具傳遞給頁面組件
<button onClick={()=>setToggle(!toggle)}> Redirect </button>
供你參考，
https://reactjs.org/docs/lifting-state-up.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/505693.html