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 函数负责创建
相关推荐
Boilermaker199239 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构