只会Vue，快速上手React（React Router篇）如果你对 Vue Router 有了解的话，那么 React

站长

2024年09月03日 22:43 · 阅读数 20

前言

React Router

如果你对 Vue Router 有了解的话，那么 React Router 肯定也不在话下，因为他们实在太相似了。我们知道前端路由是一个在单页应用中管理不同页面的导航，无需向服务器发送请求重新加载整个页面。即一个path对应一个component。所以 Router 在不管是 Vue 还是 React 亦或是 Angular 都是前端单页应用不可或缺的一部分。

安装

选择自己喜欢的包管理工具，这里需要注意安装的是 react-router-dom，后面有个 dom，跟 react-dom 一个道理，React Router 库分为多个包，其中react-router-dom是专门用于在浏览器中运行 React 的路由方案，适合 Web 开发。如果是移动端开发应该用react-router-native。

npm install react-router-dom

路由模式

我们知道在 Vue 中有两种路由模式 History 跟 Hash 模式，React 同样。下表是我对这两者的简单对比，想必大家背八股的时候就已经熟记于心了。

模式	url	原理	后端支持
history	url/login	history对象 + pushState事件	需要
hash	url/#/login	hashChange事件	不需要

基本使用

主要文件目录如下

src/
|-- pages/
|   |-- Login.jsx
|   |-- About.jsx
|-- router/
|   |-- index.jsx
|-- App.jsx
|-- main.jsx

我们一般都在src下新建目录router，然后在index.jsx中创建路由。

// router/index.jsx
import { createBrowserRouter } from 'react-router-dom'
import Login from '@/views/Login'
import Home from '@/views/Home'

const router = createBrowserRouter([ //创建 history 路由
    {
        path: '/home',
        element: <Home/>,
    },
    {
        path: '/login',
        element: <Login />,
    }
])

export default router

react-router-dom提供createBrowserRouterAPI 跟 Vue Router 提供的createWebHistory一样，允许我们创建 History 模式路由，Hash 模式 React 与 Vue 分别对应createHashRouter与createWebHashHistory，如果记混了可以自行查文档。

// app.jsx
import './App.css';
import { RouterProvider } from 'react-router-dom';
import router from './router';

function App() {
  return (
    <RouterProvider router={router}></RouterProvider>
  );
}

export default App;

创建好了就该使用了，在 Vue 中是直接在main.js中 App 根组件直接use掉，而在 React 中则有所不同， React Router 专门提供一个组件 RouterProvider，用于将路由配置传递给应用。它接受一个routerprop，该 prop 是在刚刚创建的路由实例。

导航跳转

声明式导航

通过在模板中使用<Link />组件，通过to属性指定要跳转的路径，跟 Vue 的router-link很类似，

🌰现在我们要实现从登录页跳转至首页：

import React from 'react';
import { Link } from 'react-router-dom';

const Login = () => {
    return (
        <div>
            Login
            <Link to='/home'>跳转至首页</Link>
        </div>
    );
};

export default Login;

我们先手动去到/login路径。

只会Vue，快速上手React（React Router篇）如果你对 Vue Router 有了解的话，那么 React

编程式导航

通过useNavigate钩子拿到导航方法，再通过调用命令式进行跳转。类似于 Vue 的router.push()

🌰一样的场景:

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>Login</h1>
            <button onClick={()=>navigate('/home')}>跳转</button>
        </div>
    );
};

export default Login;

通过事件驱动跳转，更加灵活。

导航传参

React 提供了两个钩子允许我们进行导航传参。

useSearchParams 传参

这里我们在 Login 页面进行跳转，并用?+参数名=参数拼接，多个参数用&拼接。

// login.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>Login</h1>
            <button onClick={()=>navigate('/home?id=1&name=yangyang')}>跳转传参</button>
        </div>
    );
};

export default Login;

useSearchParams运行我们解构出一个对象，这个对象包含了所有通过?后的参数

// home.jsx
import React from 'react';
import { useSearchParams } from 'react-router-dom';

const Home = () => {
    const [params] = useSearchParams();
    console.log(params);
    return (
        <div>
            <h1>Home</h1>
            <div>id:{params.get('id')}</div>
            <div>name:{params.get('name')}</div>
        </div>
    );
};

export default Home;

我们打印 params 对象看看

它是一个URLSearchParams 对象，包含了一系列方法，我们可以使用get方法查询参数

useParams

这里我们还是在 Login 页面进行跳转，我们直接在路径后面继续接/+参数，

// login.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>Login</h1>
            <button onClick={()=>navigate('/home/1/yangyang')}>跳转传参</button>
        </div>
    );
};

export default Login;

不仅如此，还需要修改router配置，将补全path用:+参数名，这样才能一一匹配。

{
    path: '/home/:id/:name',
    element: <Home />,
},

最后，在 Home 页面接收参数，调用useParams得到一个对象，对象的每个属性就是我们传递的参数

// home.jsx
import { useParams } from 'react-router-dom';

const Home = () => {
    const params = useParams();
    console.log(params);
    return (
        <div>
            <h1>Home</h1>
            <div>id:{params.id}</div>
            <div>name:{params.name}</div>
        </div>
    );
};

export default Home;

嵌套路由

跟 Vue 一样，React 同样允许你在一个路由组件的children属性中配置子路由。

// router/index.js
const router = createBrowserRouter([
    {
        path: '/home',
        element: <Home/>,
        children:[
            {
                index: true, //默认二级路由
                path: 'board',
                element: <Board/>
            },
            {
                path: 'about',
                element: <About/>
            },
        ]
    },
    {
        path: '/login',
        element: <Login />,
    },
])

二级路由的path如果不写/，会默认拼接在父级路由后面，配置index:true表示默认显示该路由。

// home.js
import { Link,Outlet } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <Link to="board">面板</Link>|
            <Link to="about">关于</Link>
            <Outlet />
        </div>
    );
};

export default Home;

我们通过Link组件进行跳转，Outlet组件是二级路由的出口，你定义在哪，那么组件就会在哪显示，跟 Vue 的router-view类似。

懒加载

React提供了React.lazy和Suspense组件来实现懒加载。React.lazy用于定义懒加载的组件，Suspense用于在组件加载时显示。

import { createBrowserRouter } from 'react-router-dom'
import { Suspense, lazy } from 'react'

const Home = lazy(() => import('@/pages/Home'))
const Login = lazy(() => import('@/pages/Login'))
const Board = lazy(() => import('@/pages/Board'))
const About = lazy(() => import('@/pages/About'))

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Suspense fallback={'加载中'}><Login /></Suspense>,
    },
    {
        path: '/home',
        element: <Suspense fallback={'加载中'}><Home/></Suspense>,
        children:[
            {
                index: true,
                path: 'board',
                element: <Suspense fallback={'加载中'}><Board/></Suspense>
            },
            {
                path: 'about',
                element: <Suspense fallback={'加载中'}><About/></Suspense>
            },
        ]
    }
])

export default router

通过套一层lazy就可以实现懒加载，Suspense提供 loading 内容。

总结

不管是 Vue 还是 React ，前端路由的大致理念都是一样的，我们如果知道一个，很容易融汇贯通。还是那句话，多看文档，多敲代码，多实践！

参考

最后

码字不易，感谢三连！React 系列将会持续更新！

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞收藏+关注” ，感谢支持！！

转载自:https://juejin.cn/post/7379157261426655273