react跳轉傳值如何實現

React跳轉傳值如何實現

在React應用中，頁面跳轉和傳值是常見的需求。React Router是React生態中最常用的路由管理庫，它提供了強大的功能來實現頁面跳轉和傳值。本文將詳細介紹如何在React中實現頁面跳轉并傳遞參數。

1. 安裝React Router

首先，我們需要安裝React Router庫。如果你還沒有安裝，可以使用以下命令進行安裝：

npm install react-router-dom

2. 基本路由配置

在React應用中，我們通常使用BrowserRouter或HashRouter來包裹整個應用，并使用Route組件來定義路由。以下是一個簡單的路由配置示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/user/:id" component={UserProfile} />
      </Switch>
    </Router>
  );
}

export default App;

在這個例子中，我們定義了三個路由：/、/about和/user/:id。其中，/user/:id是一個動態路由，:id是一個占位符，表示用戶的ID。

3. 使用Link組件進行頁面跳轉

在React Router中，我們可以使用Link組件來實現頁面跳轉。Link組件類似于HTML中的<a>標簽，但它不會導致頁面刷新。以下是一個使用Link組件的示例：

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">Go to About</Link>
      <Link to="/user/123">Go to User Profile</Link>
    </div>
  );
}

export default Home;

在這個例子中，我們使用了兩個Link組件，分別跳轉到/about和/user/123。

4. 使用useHistory鉤子進行編程式導航

除了使用Link組件，我們還可以使用useHistory鉤子來實現編程式導航。useHistory鉤子返回一個history對象，我們可以使用它來手動導航到其他頁面。以下是一個使用useHistory鉤子的示例：

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const goToAbout = () => {
    history.push('/about');
  };

  const goToUserProfile = () => {
    history.push('/user/123');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToAbout}>Go to About</button>
      <button onClick={goToUserProfile}>Go to User Profile</button>
    </div>
  );
}

export default Home;

在這個例子中，我們定義了兩個按鈕，分別用于跳轉到/about和/user/123。

5. 傳遞參數

在React Router中，我們可以通過多種方式傳遞參數。以下是幾種常見的方式：

5.1 通過URL參數傳遞

我們可以通過URL參數傳遞數據。例如，在/user/:id路由中，:id就是一個URL參數。我們可以在目標組件中使用useParams鉤子來獲取這個參數。以下是一個示例：

import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

export default UserProfile;

在這個例子中，我們使用useParams鉤子獲取了URL中的id參數，并在頁面中顯示出來。

5.2 通過state傳遞

我們還可以通過state傳遞數據。state是一個對象，可以在跳轉時傳遞給目標頁面。以下是一個示例：

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const goToUserProfile = () => {
    history.push({
      pathname: '/user/123',
      state: { name: 'John Doe' }
    });
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToUserProfile}>Go to User Profile</button>
    </div>
  );
}

export default Home;

在目標組件中，我們可以使用useLocation鉤子來獲取state數據：

import React from 'react';
import { useLocation } from 'react-router-dom';

function UserProfile() {
  const location = useLocation();
  const { name } = location.state || {};

  return (
    <div>
      <h1>User Profile</h1>
      <p>User Name: {name}</p>
    </div>
  );
}

export default UserProfile;

在這個例子中，我們通過state傳遞了name參數，并在目標頁面中顯示出來。

5.3 通過查詢參數傳遞

我們還可以通過查詢參數傳遞數據。查詢參數是URL中?后面的部分。我們可以使用useLocation鉤子來獲取查詢參數。以下是一個示例：

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const goToUserProfile = () => {
    history.push('/user/123?name=John%20Doe');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToUserProfile}>Go to User Profile</button>
    </div>
  );
}

export default Home;

在目標組件中，我們可以使用URLSearchParams來解析查詢參數：

import React from 'react';
import { useLocation } from 'react-router-dom';

function UserProfile() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');

  return (
    <div>
      <h1>User Profile</h1>
      <p>User Name: {name}</p>
    </div>
  );
}

export default UserProfile;

在這個例子中，我們通過查詢參數傳遞了name參數，并在目標頁面中顯示出來。

6. 總結

在React中，我們可以使用React Router來實現頁面跳轉和傳值。通過Link組件或useHistory鉤子，我們可以輕松地實現頁面跳轉。通過URL參數、state或查詢參數，我們可以靈活地傳遞數據。掌握這些技巧，可以幫助我們構建更加復雜和功能豐富的React應用。