【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 的基本技巧。接下来，你可以通过阅读官方文档和更多实践来深入学习。