React路由_react路由模块-优快云博客

什么是前端路由

一个路径path对应一个组件component，当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染
cosnt routes =[
    {path: '/home', component: Home},
    {path: '/about', component: About}
]

创建路由开发环境

使用路由，还是采用CRA创建项目的方式进行基础环境配置
1. 创建项目并安装所有依赖
    npx create-react-app react-router-demo
    npm i
2. 安装最新的ReactRouter包
    npm i react-router-dom
3. 启动项目
    npm run start

import React from 'react';
import ReactDOM from 'react-dom/client';
import {createBrowserRouter, RouterProvider } from 'react-router-dom';

// 1.创建router实例对象，并且配置路由对应关系
const router = createBrowserRouter([
    {
        path: '/',
        element: <div>hello react</div>
    },
    {
        path: '/login',
        element: <div>登录页</div>
    },
    {
        path: '/details',
        element: <div>详情页</div>
    }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        {/* 2.将router渲染给react-router */}
        <RouterProvider router={router}></RouterProvider>
    </div>

);

// 3. 访问：
// http://localhost:3000/login
// http://localhost:3000/details

抽象路由模块

在page目录创建页面组件
在router目录创建路由模块
在index.js中集中引入路由模块

import Login from '../page/Login'
import Details from '../page/Details'
import Layout from '../page/Layout'
import NotFound from '../page/NotFound'

import {createBrowserRouter}  from 'react-router-dom'


const router = createBrowserRouter([
    {
        path: '/',
        element: <div>welcom</div>,
    },
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/details/:id/:name',
        element: <Details/>,
    },
    {
        path: '/details',
        element: <Details/>,
    },
    {
        path: '/home',
        element: <Layout/>,
        children:[
            {
                // path: 'login',
                index: true,
                element: <Login/>,
            },
            {
                path: 'details',
                element: <Details/>,
            },
        ]
    },
    {
        path: '*',
        element: <NotFound/>,
    }
])

export default router

路由导航

什么是路由导航：路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信

声明式导航

声明式导航是指通过在模板中通过<Link/>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行
<Link to="/home">Home</Link>
语法说明：通过给组件的to属性指定要跳转的路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可

import {Link} from "react-router-dom";

const Login = () => {
    return (
        <div>这里是登录页
            {/* 声明式导航*/}
            <Link to={"/details"}>跳转到详情</Link>
        </div>
    )
}

编程式导航

编程式导航是指通过useNavigate钩子得到导航方法，然后通过调用方法以命令的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活
const navigate = useNavigate()
语法说明：通过调用navigate方法传入地址path实现跳转

import {useNavigate} from "react-router-dom";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>这里是登录页
            {/* 编程式导航*/}
            <button onClick={() => navigate('/details')}>跳转</button>
        </div>
    )
}

导航传参

searchParams传参

1. 传参
navigate('/details?id=123&username=tom')
2. 获取传参
let [params] = useSearchParams()
let id = params.get('id')

传参

import {useNavigate} from "react-router-dom";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>这里是登录页
            {/* searchParams传参*/}
            <button onClick={() => navigate('/details?id=1&name=macy')}>跳转</button>
        </div>
    )
}

取参

import {useSearchParams} from "react-router-dom";

const Details = () => {
    // useSearchParams取路由参数
    const [params] = useSearchParams()
    let id = params.get("id");
    let name = params.get("name")

    return (
        <div>
            这里是详情页:{id}---{name}
        </div>
    )
}

params传参

1.传参
navigate('/details/123)
2. 在路由模块设置路由占位符
{
    path: '/details/:id/:name',
    element: <Details/>,
},
3. 获取传参
const params = useParams()
let id = params.id

传参

import {useNavigate} from "react-router-dom";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>这里是登录页
            {/* params传参*/}
            <button onClick={() => navigate('/details/1/macy')}>跳转</button>
        </div>
    )
}

配置占位符

const router = createBrowserRouter([
    {
        path: '/',
        element: <div>Welcome</div>,
    },
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/details/:id/:name',
        element: <Details/>,
    },
])

取参

import {useParams} from "react-router-dom";

const Details = () => {
    // params取路由参数
    const params2 = useParams()
    let id2 = params2.id
    let name2 = params2.name
    return (
        <div>
            <div>这里是详情页====:{id2}---{name2}</div>
        </div>
    )
}

嵌套路由配置

在一级路由中有内嵌了其他路由，这种关系叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由
实现步骤：
1.使用children属性配置路由嵌套关系
{
    path: '/home',
    element: <Layout/>,
    children:[
        {
            path: 'login',
            element: <Login/>,
        },
        {
            path: 'details',
            element: <Details/>,
        },
    ]
},
2.使用Outlet组件配置二级路由渲染位置

import {Link, Outlet} from "react-router-dom";

const Layout = () => {
    return(
        <div>
            Layout组件
            <Link to="/home/login">登录页</Link>  -
            <Link to="/home/details">详情页</Link>

            {/*配置二级路由出口*/}
            <Outlet/>
        </div>
    )
}

默认二级路由

当访问的是一级路由时，默认的二级路由组件可以得到渲染，需要在二级路由的配置去掉path，设置index属性为true
{
    path: '/home',
    element: <Layout/>,
    children:[
        {
            // 设置为默认的二级路由，当访问/home时会自动渲染Login组件
            // path: 'login',
            index: true,
            element: <Login/>,
        },
        {
            path: 'details',
            element: <Details/>,
        },
    ]
},

404路由

场景：当浏览器输入url的路径在整个路由配置中都找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染
实现步骤：
1. 准备一个NotFount组件
2. 在路由表数组的末尾，以*号作为路由path配置路由

    {
        path: '*',
        element: <NotFound/>,
    }

两种路由模式

各个主流框架的路由常用的路由模式有两种，history和hash模式，ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

路由模式	url表现	底层原理	是否需要后端支持
history	url/login	history对象 + pushState事件	需要
hash	url/#/login	监听hashChange事件	不需要