1.React 路由介绍

React路由是一种用于构建单页应用程序的工具集，允许创建跨页面或组件之间导航的交互式用户体验。你可以使用路由来动态加载组件，将状态传递给其他组件或动态更改URL。

2. React Router路由的基本概念

React Router是一个基于React的第三方路由库，在构建单页应用程序（SPA）时非常有用。它提供了一个声明式的方式来管理应用程序的URL，并使得页面之间的导航非常容易。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
路由的作用：
前端路由的功能：让用户从一个视图(页面)导航到另一个视图(页面)
前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
使用React路由简单来说，就是配置路径和组件(配对)

下面是React Router的一些基本概念：

2.1 路由组件

• BrowserRouter
  BrowserRouter和HashRouter是React Router库中两个最常用的组件。
  BrowserRouter使用HTML5的history API来允许用户在应用程序中访问不同的页面
• HashRouter
  HashRouter则使用URL的#号来实现类似的效果。如果你需要支持老版本的浏览器，建议使用HashRouter。
• Link
  Link组件是React Router库中另一个非常常用的组件。它用于在用户之间导航时生成锚点链接，可以将URL路径传递给路由器，并防止页面重新加载。

2.2 路由方法

React Router是一个灵活的路由库，提供了多种方法来操作路由，其中包括一些常用属性，如useParams useLocation useHistory useSearchParams useNavigate useRouter。

• useRouter
  useRouter是React Router库中的一个自定义hook，可以用来在函数组件中获取路由器和导航对象。使用useRouter可以方便地在组件中进行路由相关操作，例如在处理表单提交时手动导航、在代码中动态生成路由路径等等。

在以下代码中，我们首先使用useRouter()钩子函数获取路由器和导航对象router，然后在表单的submit事件中调用router.navigate()函数，实现手动导航。这种方式比直接编写a标签链接更加方便和灵活。

import React from 'react';
import { useRouter } from 'react-router-dom';function MyComponent() {const router = useRouter();const handleSubmit = (event) => {// 处理表单提交逻辑router.navigate('/dashboard');}return (<form onSubmit={handleSubmit}>{/* 渲染表单 */}<button type="submit">提交</button></form>);
}export default MyComponent;

• useParams
  useParams是React Hooks中React Router提供的路由参数获取方法。该方法可以获取路由中传递的动态参数和查询参数，并将其封装在一个对象中返回。

在下面的例子中，我们通过useParams获取了路由参数postId，并在组件中呈现它

import React from "react";
import { useParams } from "react-router-dom";export default function Post() {const { postId } = useParams();return (<div><h2>Post ID: {postId}</h2></div>);
}

• useLocation
  useLocation是React Router提供的另一个属性，用于获取当前URL的位置信息。
  路由默认参数location的属性包含：路径名称pathname，状态hash，查询参数search，状态state。

在这个例子中，我们使用useLocation获取了当前URL路径，并把它呈现在组件中。

import React from "react";
import { useLocation } from "react-router-dom";export default function MyComponent() {const location = useLocation();return (<div><h2>Current URL: {location.pathname}</h2></div>);
}

• useHistory
  useHistory用于获得history对象，通过其方法可实现路由的跳转、返回等操作。

示例代码

import React from 'react';
import { useHistory } from 'react-router-dom';function Login() {const history = useHistory();function handleClick() {// 跳转到首页history.push('/');}return (<button onClick={handleClick}>登录</button>);
}export default Login;

• useSearchParams
  useSearchParams用于获取当前路由的查询参数。它可以在函数组件中调用，用于从URL查询参数中获取数据。通过这个函数，我们可以在React组件内获取URL中的查询参数，从而方便地实现各种基于查询参数的页面逻辑。

在下面的代码中，我们首先通过useLocation()钩子函数获取当前路由的location对象，然后使用URLSearchParams构造函数创建一个查询参数对象，然后调用get()方法获取查询参数的值，并将其存储在query变量中。

import React from 'react';
import { useLocation } from 'react-router-dom';function SearchResults() {const location = useLocation();const searchParams = new URLSearchParams(location.search);const query = searchParams.get('q');// 使用查询参数进行搜索return (<><h1>搜索结果</h1><p>您搜索的关键字为：{query}</p>{/* 渲染搜索结果 */}</>);
}export default SearchResults;

• useNavigate
  useNavigate是React Router库中的一个Hook函数，可以在函数组件中进行程序化的导航。在某些场景下，程序化的导航比使用链接更方便，例如表单提交成功后跳转到指定页面，或者根据某些条件进行页面跳转等。

在下面代码中，我们首先使用useNavigate()函数获取导航对象navigate，然后在登录成功后调用navigate()函数进行程序化导航，跳转到指定的页面。使用useNavigate()函数可以方便地进行程序化导航，从而提升应用的用户体验。

import React from 'react';
import { useNavigate } from 'react-router-dom';function Login() {const navigate = useNavigate();const handleLogin = () => {//TODO: 登录逻辑navigate('/dashboard');}return (<form>{/* 渲染表单 */}<button type="submit" onClick={handleLogin}>登录</button></form>);
}export default Login;

2.3 子路由 和 404页面配置

React Router提供了一种组织嵌套路由的方式，叫做子路由。子路由可以让我们更加方便地组织和管理多层嵌套的路由，提高路由的可读性和可维护性。子路由也可以用于实现布局嵌套或者组件复用等操作。
useRoutes 是 React Router v6 新增的 Hook，使用它可以让我们在组件内部创建嵌套路由，而不需要在组件路由外面套一层 配置。

使用 useRoutes 的语法相对简单，只需要给它传入一个配置对象，然后在对象的属性中定义路由即可。下面是一个简单的示例：
在下面的代码中，我们首先使用 useRoutes 初始化了一组路由，其中包括了 Home、About、Users、404 等多个路由。其中，Users 的子路由定义在了 children 属性中，可以看到使用起来还是很简单的。

import { useRoutes } from "react-router-dom";function App() {const routes = useRoutes([{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },{path: "/users",element: <Users />,//子路由配置children: [{ path: "/", element: <UsersList /> },{ path: "/:id", element: <UserProfile /> },],},//404页面 配置{ path: "*", element: <NotFound /> },]);return (<div className="App">{routes}</div>);
}

3. 路由使用流程

3.1 安装和配置 React Router

npm install react-router-dom --save

3.2 创建页面

3.3 配置路由 在src/router/index.jsx

// 路由配置
const routes = [
// element 节点方式引入{ path: '/', element: <HomeView /> },{ path: '/about', element: <AboutView /> }
]

3.4 创建路由组件 src/router/index.jsx

// 使用useRoutes 创建视图
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回路由视图
return elem;
}

3.5 使用并切换路由 src/App.jsx

router-index.js完整代码

import { useRoutes } from "react-router-dom";
// 导入页面文件
import HomeView from "@/views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "@/views/ProductView";
import AdminView from "@/views/admin/AdminView";
import DashView from "@/views/admin/DashView";
import OrderList from "@/views/admin/OrderList";
import NoMatch from "@/views/NoMatch";
// 引入权限组件
import Private from "./Private";
// 引入加载组件
import LazyLoad from "./LazyLoad";
// 路由配置
const routes = [// element 节点方式引入{ path: '/', element: <HomeView /> },{ path: '/about', element: LazyLoad('AboutView') },{ path: '/product/:id', element: <ProductView /> },// 配置子路由{path: '/admin', element: <Private><AdminView /></Private>,children: [{ path: '', element: <DashView /> },{ path: 'orderlist', element: <OrderList /> },]},{ path: '*', element: <NoMatch /> }
]
// 使用useRoutes 创建视图
export default function RouterView() {// 创建路由const elem = useRoutes(routes);// 返回路由视图return elem;
}

以上就是react-router基本路由介绍啦