前端路由快速上手-React-Router

1. 前端路由简介

前端路由是一种在单页面应用（SPA）中实现页面跳转的技术，它允许我们通过改变URL地址而无需重新加载页面来显示不同的内容。在前端路由中，每个路径（path）都对应一个组件（component），当访问特定的路径时，对应的组件就会在页面上渲染。

2. 创建路由开发环境

要开始使用React Router，首先需要创建一个新的React应用，并安装React Router的DOM包。

# 使用Create React App创建项目
npx create-react-app react-router-pro

# 安装React Router DOM包
npm install react-router-dom

# 启动项目
npm run start

3. 快速开始

接下来，我们将创建一个简单的路由配置，定义两个路径：/login 和 /article，分别对应登录页和文章页。

// 根index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { createBrowserRouter as createRouter, RouterProvider } from 'react-router-dom';

// 创建router实例对象并配置路由对应关系
const router = createRouter([
  {
    path: '/login',
    element: <div>我是登录页</div>,
  },
  {
    path: '/article',
    element: <div>我是文章页</div>,
  },
]);

ReactDOM.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
  document.getElementById('root')
);

4. 抽象路由模块

为了使代码更加模块化，我们可以将每个页面组件抽象成单独的模块，然后在路由配置中引入它们。

// Article/index.js
const Article = () => <div>我是文章页</div>;
export default Article;

// Login/index.js
const Login = () => <div>我是登录页</div>;
export default Login;

// router/index.js
import Login from '../page/Login';
import Article from '../page/Article';
import { createRouter } from 'react-router-dom';

const router = createRouter([
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/article',
    element: <Article />,
  },
]);

export default router;

5. 路由导航

路由导航是实现页面跳转的关键。React Router提供了两种导航方式：声明式导航和编程式导航。

5.1 声明式导航

声明式导航使用<Link>组件，它类似于HTML中的<a>标签，但专为React Router设计。

//login/index.js
import { Link } from 'react-router-dom';

const Login = () => {
  return (
    <div>
      我是登录页
      <Link to="/article">去文章页</Link>
    </div>
  );
};

export default Login;

5.2 编程式导航

编程式导航使用useNavigate钩子，它提供了一个navigate函数，允许我们以编程的方式进行页面跳转。

//login/index.js
import { useNavigate, Link } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      我是登录页
      <Link to="/article">去文章页</Link>
      <button onClick={() => navigate('/article')}>跳转文章页</button>
    </div>
  );
};

export default Login;

6. 导航传参

在路由跳转时，我们经常需要传递参数。React Router支持通过查询字符串（search params）和路径参数（path params）传递参数。

//login/index.js
import { useNavigate, Link } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      ...
      <button onClick={() => navigate('/article?id=1001&name=张三')}>searchParam传参</button>
      <button onClick={() => navigate('/article/1001/张三')}>Path传参</button>
    </div>
  );
};

export default Login;

//router/index.js
// ... 省略其他路由配置
{
  path: '/article/:id/:name',
  element: <Article />,
}

7. 嵌套路由配置

嵌套路由允许我们在一级路由中嵌入其他路由，形成多级路由结构。

//layout/index.js
import { Link, Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      一级路由
      <Link to="/board">面板</Link>
      <Link to="/about">关于</Link>
      <Outlet />
    </div>
  );
};
export default Layout;

// router/index.js
import Layout from '../page/Layout';
// ... 省略其他路由配置
const router = createRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'board',
        element: <Board />,
      },
      {
        index: true,
        element: <About />,
      },
    ],
  },
  // ... 404路由配置
]);

8. 默认二级路由和404路由配置

在路由配置中，我们可以设置默认的二级路由，以及当所有路由都不匹配时的404页面。

// router/index.js
// ... 省略其他路由配置
{
  path: '/',
  element: <Layout />,
  children: [
    // ... 其他二级路由配置
    {
      path: 'about',
      index: true, // 设置为默认二级路由
      element: <About />,
    },
    {
      path: '*',
      element: <NotFound />, // 404路由配置
    },
  ],
}

9. 路由模式

React Router支持两种路由模式：history模式和hash模式，分别由createBrowserRouter和createHashRouter函数创建。

• history模式：URL表现为url/login，依赖HTML5 history对象的pushState事件，需要后端支持。
• hash模式：URL表现为url/#/login，依赖监听hashChange事件，不需要后端支持。

以上就是前端路由的快速上手指南，希望对你有所帮助。