【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 的基本技能。接上去，你可能经由过程浏览官方文档跟更多现实来深刻进修。