react路由傳參

　　1.路由參數(params形式)

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

　　定義

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

      獲取

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

function UserDetails() {

　　const { id } = useParams();

　　// ...

　　}

     2.查詢參數(search形式)

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

　　定義

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

      獲取

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

function UserDetails() {

　　const searchParams = useSearchParams();

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

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

　　// ...

　　}

      3.狀態對象

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

　　定義

function handleClick() {

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

　　}

      獲取

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

　function UserDetails() {

　　const location = useLocation();

　　const { id } = location.state;

　　// ...

　　}

      注意

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

上一篇

JavaScript全解析——express

下一篇

小程序路由跳轉