【React Router v6入門教程】輕鬆掌握前端頁面跳轉技巧

引言

React Router 是一個富強的庫，它容許開辟者在前端利用中管理路由。React Router v6 引入了很多新特點跟改進，使得路由管理愈加機動跟高效。本教程將帶你從零開端，進修怎樣利用 React Router v6 實現前端頁面跳轉。

安裝 React Router v6

起首，確保你的項目中曾經安裝了 React。然後，利用以下命令安裝 React Router v6：

npm install react-router-dom

或許假如你利用 yarn：

yarn add react-router-dom

創建路由構造

在 React 利用中，我們平日在 src 目錄下創建一個名為 router 的文件夾，並在其中創建一個 index.js 文件來設置路由。

import { createBrowserRouter } from 'react-router-dom';
import Home from '../views/Home';
import About from '../views/About';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

export default router;

這裡，我們定義了兩個路由：一個是根路由 /，它將襯著 Home 組件；另一個是 /about 路由，它將襯著 About 組件。

路由掛載

在 App.js 或 index.js 文件中，利用 RouterProvider 組件來掛載路由：

import { BrowserRouter, RouterProvider } from 'react-router-dom';
import router from './router';

function App() {
  return (
    <BrowserRouter>
      <RouterProvider router={router} />
    </BrowserRouter>
  );
}

export default App;

利用 <Link> 組件停止頁面跳轉

在 React 中，我們平日利用 <Link> 組件來代替原生的 <a> 標籤停止頁面跳轉，因為它可能更好地與 React Router 一起任務。

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

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

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Link to="/">Go back to Home Page</Link>
    </div>
  );
}

編程式導航

除了利用 <Link> 組件停止頁面跳轉，React Router 還容許你利用編程式導航。

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const goAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goAbout}>Go to About Page</button>
    </div>
  );
}

靜態路由跟參數

React Router 支撐靜態路由跟參數。比方，假如你想創建一個用戶概略頁面，你可能如許定義路由：

{
  path: '/user/:id',
  element: <UserDetail userId={id} />,
}

這裡，:id 是一個靜態參數，它會與 UserDetail 組件的 userId 屬性一起轉達。

總結

React Router v6 是一個功能富強的庫，可能幫助你輕鬆地實現前端頁面跳轉。經由過程本教程，你應當曾經控制了利用 React Router v6 的基本技能。接上去，你可能經由過程瀏覽官方文檔跟更多現實來深刻進修。