react路由傳參

　　1.路由參數(shù)(params形式)

　　路由參數(shù)是將參數(shù)嵌入到 URL 中的一種方式。在 React Router 6 中，我們可以通過在路由路徑中使用冒號來定義參數(shù)

　　定義

<Route path="/users/:id" element={<UserDetails />} />

      獲取

　　我們定義了一個名為 id 的參數(shù)，它可以在 URL 中的 /:id 部分找到。當用戶訪問 /users/123 時，123 將成為路由參數(shù)，并可以在組件中通過 useParams 鉤子函數(shù)訪問

function UserDetails() {

　　const { id } = useParams();

　　// ...

　　}

     2.查詢參數(shù)(search形式)

　　查詢參數(shù)是在 URL 中使用問號傳遞的一種參數(shù)。在 React Router 6 中，我們可以通過在 URL 中添加查詢參數(shù)來傳遞參數(shù)

　　定義

<Link to="/users?id=123">User Details</Link>

      獲取

　　我們向 /users 頁面?zhèn)鬟f了一個名為 id 的查詢參數(shù)，并將其設置為 123。我們可以在組件中使用 useLocation 鉤子函數(shù)獲取當前 URL 中的查詢參數(shù)，并使用 URLSearchParams 對象來解析它們　

function UserDetails() {

　　const searchParams = useSearchParams();

　　// 使用URLSearchParams這個對象解析url的search，然后直接獲取id

　　const id = searchParams.get('id');

　　// ...

　　}

      3.狀態(tài)對象

　　狀態(tài)對象是一種可以在導航期間傳遞數(shù)據(jù)的機制。在 React Router 6 中，我們可以在 navigate 函數(shù)中使用第二個參數(shù)來傳遞狀態(tài)對象

　　定義

function handleClick() {

　　navigate('/users', { state: { id: 123 } });

　　}

      獲取

　　我們在導航到 /users 頁面時傳遞了一個名為 id 的狀態(tài)對象。我們可以在組件中使用 useLocation 鉤子函數(shù)獲取當前 URL 中的狀態(tài)對象

　function UserDetails() {

　　const location = useLocation();

　　const { id } = location.state;

　　// ...

　　}

      注意

　　使用狀態(tài)對象傳遞數(shù)據(jù)會將數(shù)據(jù)存儲在瀏覽器的會話歷史中，因此它僅適用于頁面之間的相鄰導航。如果用戶從當前頁面返回到其他頁面，狀態(tài)對象中的數(shù)據(jù)將被清除。如果需要在不同頁面之間共享數(shù)據(jù)，最好使用其他的數(shù)據(jù)傳遞方式，如 Redux 或 Context API

上一篇

JavaScript全解析——express

下一篇

小程序路由跳轉