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基本路由介绍啦

react路由基础到进阶版来了

1.React 路由介绍

2. React Router路由的基本概念

2.1 路由组件

2.2 路由方法

2.3 子路由和 404页面配置

3. 路由使用流程

3.1 安装和配置 React Router

3.2 创建页面

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

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

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

猜你喜欢

react路由基础到进阶版来了

1.React 路由介绍

2. React Router路由的基本概念

2.1 路由组件

2.2 路由方法

2.3 子路由 和 404页面配置

3. 路由使用流程

3.1 安装和配置 React Router

3.2 创建页面

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

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

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

猜你喜欢

2.3 子路由和 404页面配置

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