react之ReactRouter的使用

react之ReactRouter的使用

一、环境搭建

  • 1.创建项目安装依赖
bash 复制代码
npx create-react-app react-router-pro
npm i
  • 2.安装最新的 ReactRouter包
bash 复制代码
npm i react-router-dom
  • 3.启动项目
bash 复制代码
npm run start

二、抽象路由模块

1.创建page文件夹,并创建Login和Article组件

  • login组件
javascript 复制代码
//登录页面
const Login = function () {
  const navigate = useNavigate()
  return (
    <>
      <div>
        我是登录页面
      </div>
    </>
  )
}
export default Login
  • Article组件
javascript 复制代码
function Article() {
  return (
    <div>
      我是文章页面{id}={name}
    </div>
  )
}

export default Article

2.创建router文件夹=>index.js 配置路由

javascript 复制代码
//路由模块

import { createBrowserRouter } from 'react-router-dom'
import Login from '../page/Login'
import Article from '../page/Article'
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/article',
    element: <Article />,
  },
])

//导出
export default router

3.index.js中引入路由

javascript 复制代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import reportWebVitals from './reportWebVitals'

//路由
import { RouterProvider } from 'react-router-dom'
//引入路由
import router from './router'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
)

reportWebVitals()

三、路由导航

  • 路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信

3.1 声明式导航

  • 声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去
javascript 复制代码
//登录页面
import { Link} from 'react-router-dom'
const Login = function () {
  return (
    <>
      <div>
        我是登录页面
        <Link to="/article">跳转到文章页面(声明式)</Link>
    </>
  )
}
export default Login

3.2 编程式导航

  • 编程式导航是指通过 useNavigate钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转
javascript 复制代码
//登录页面
import { useNavigate } from 'react-router-dom'
const Login = function () {
  const navigate = useNavigate()
  return (
    <>
      <div>
        我是登录页面
        <button onClick={() => navigate('/article')}>
          跳转到文章页(编程式)
        </button>
 
    </>
  )
}
export default Login

四、导航传参

4.1 searchParams 传参

传参

javascript 复制代码
<button onClick={() => navigate('/article?id=100&name=jack')}>
    searchParams(传参)
</button>

接参

javascript 复制代码
import { useSearchParams} from 'react-router-dom'

const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

4.2 params 传参

传参

javascript 复制代码
<button onClick={() => navigate('/article/101/jack')}>
    useParams(传参)
</button>

路由中配置

javascript 复制代码
{
    path: '/article/:id/:name',
    element: <Article />,
  },

接参

javascript 复制代码
import {  useParams } from 'react-router-dom'

const params = useParams()
const id = params.id
const name = params.name

五 、嵌套路由配置

  • 在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由

实现步骤

  • 1.使用 children 属性配置路由嵌套关系
javascript 复制代码
{
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'board',
        element: <Board />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
  • 2.使用 <Outlet/>组件配置二级路由渲染位置
javascript 复制代码
import { Link, Outlet } from 'react-router-dom'

const Layout = () => {
  return (
    <div>
      我是一级路由layout
      <br />
      <Link to="/board">面板</Link>
      <br />
      <Link to="/about">关于</Link>
      {/* 配置二级路由出口 */}
      <Outlet></Outlet>
    </div>
  )
}

export default Layout

六、默认二级路由

  • 当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉path,设置index属性为true
javascript 复制代码
children: [
      {
        // 设置为默认二级路由 一级路由访问 能定向到该组件
        index: true,
        element: <Board />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  • 跳转时路径传/
html 复制代码
<div>
      我是一级路由layout
      <br />
      <Link to="/">面板</Link>
      <br />
      <Link to="/about">关于</Link>
      {/* 配置二级路由出口 */}
      <Outlet></Outlet>
    </div>

七、404页面配置

  • 1.准备一个404NotFound组件
javascript 复制代码
const NotFound = () => {
  return <div>404页面</div>
}

export default NotFound
  • 2.. 在路由表数组的末尾,以*号作为路由path配置路由
javascript 复制代码
{
    path: '*',
    element: <NotFound />,
  },

八、俩种路由模式

  • 各个主流框架的路由常用的路由模式有俩种,history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript