前端路由快速上手-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路由配置},],
}