React Router 学习笔记

奶香玉米周
226 阅读4分钟

快速开始

前端路由：一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染。

首先你需要一个React 应用：

1.创建项目并安装所有依赖
npx create-react-app react-router

npm i 
yarn 

2.安装最新的react-router依赖
npm i react-router-dom
yarn add react-router-dom

3.启动项目
npm run start

创建两个测试路由页面，放在/react-router/src/router/index.js文件夹中

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

const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>我是登陆页面！</div> //实际的话此处是一个页面组件
  },
  {
    path: '/home',
    element: <div>我是首页！</div> //实际的话此处是一个页面组件
  },
])

export default router

这个时候入口文件需要将router引入(/react-router/src/index.js)

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

// 1. 导入路由router
import router from './router'

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



此时切换http://localhost:3000/login => 我是登陆页面！
此时切换http://localhost:3000/home => 我是首页！

路由导航（Button => 相应页面）

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的时候进行传参

import { Link, useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
      {/* 1.声明式的写法 */}
      <Link to="/home">跳转到首页</Link>
      {/* 2.命令式的写法 */}
      <button onClick={() => navigate('/home')}>跳转到首页</button>
      // {
      //   path: '/home',
      //   element: <Home />
      // },
      <button onClick={() => navigate('/home?id=666&name=Harley')}>searchParams传参</button>
      //{
      //   path: '/home/:id/:name',
      //   element: <Home />
      //},
      <button onClick={() => navigate('/home/666/Harley')}>params传参</button>
    </div>
  )
}

export default Login

页面path：/react-router/src/page/Home/index.js

1.searchParams传参

// 创建一个Home页面组件
import { useSearchParams } from "react-router-dom";

const Home = () => {
// 1.searchParams传参
  const [params] = useSearchParams()
  const id = params.get('id')
  const name = params.get('name')

  return <div>我是{name}-学号{id}</div>
}

export default Home

2.params传参

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

const Home = () => {
// 2.params传参
  const params = useParams()
  const id = params.id
  const name = params.name
  
  return <div>我是{name}-学号{id}</div>
}

export default Home

嵌套路由

未命名文件.png

实现步骤：

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        // path: 'layout-first',//指定二级路由配置方式
        index: true, // 默认二级路由配置方式
        element: <div>我是子路由一号！</div> //实际的话此处是一个页面组件
      },
      {
        path: 'layout-second',
        element: <div>我是子路由二号！</div> //实际的话此处是一个页面组件
      }
    ]
  },
  {
    path: '/login',
    element: <div>我是登陆页面！</div> //实际的话此处是一个页面组件
  },
  {
    path: '/home',
    element: <div>我是首页！</div> //实际的话此处是一个页面组件
  },
])

export default router

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

const Layout = () => {
  return (
    <div>
      我是一级路由layout组件
      <Link to="/layout-first">点击我是子路由一号！</Link> //指定二级路由配置方式
      <Link to="/">点击我是子路由一号！</Link> // 默认二级路由配置方式
      <Link to="/layout-second">点击我是子路由二号！</Link>
      {/* 配置二级路由的出口 */}
      <Outlet />
    </div>
  )
}

export default Layout

在React Router v6 及更高版本中，<Outlet /> 是一个核心组件，用于在路由配置中渲染匹配到当前路径的子路由。当父路由匹配成功后，<Outlet /> 标签所在的位置将作为嵌套路由的出口（即加载点），显示与当前URL匹配的子路由组件。

新增404路由

只需要在/react-router/src/router/index.js路由配置末尾中添加path:'*'：

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        // path: 'layout-first',//指定二级路由配置方式
        index: true, // 默认二级路由配置方式
        element: <div>我是子路由一号！</div>
      },
      {
        path: 'layout-second',
        element: <div>我是子路由二号！</div>
      }
    ]
  },
  {
    path: '/login',
    element: <div>我是登陆页面！</div> //实际的话此处是一个页面组件
  },
  {
    path: '/home',
    element: <div>我是首页！</div> //实际的话此处是一个页面组件
  },
  {
    path: '*',
    element: <div>非常抱歉页面丢失了！</div> //实际的话此处是一个页面组件
  },
])

export default router

React Router 两种路由模式

  1. history：

    • 它允许应用程序改变浏览器地址栏的URL而无需刷新页面，从而实现单页面应用（SPA）的平滑导航体验,URL 结构类似于http://example.com/route.
    • 当用户点击链接或触发路由变化时，createBrowserRouter 会利用 history对象 + pushState事件、replaceState事件 等方法更新浏览器的历史记录栈，同时相应地渲染匹配到当前路径的组件。
    • 使用 createBrowserRouter 需要注意的是，服务器需要配置支持任何可能的前端路由，以便在直接访问子路由页面时也能返回正确的入口HTML文件。

  2. hash：

    • 通过URL 中的哈希部分（即 # 符号后面的内容）监听hashChange事件来管理路由状态的。
    • 在这种模式下，URL 结构类似于 http://example.com/#/route，路由信息存储在哈希值中，而不是实际的路径上。
    • 哈希路由的优点在于兼容性更好，因为它不需要服务器端的支持就能正常工作，因为当用户刷新页面时，浏览器会自动将页面滚动到带有对应哈希标签的位置，保证了用户的导航状态不会丢失。

切换方式（分别使用createBrowserRouter和createHashRouter函数创建路由）：

1.history模式

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

// 1.history模式
const router = createBrowserRouter([
    {
       //...路由配置
    }
])

export default router

2.hash模式

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

// 1.hash模式
const router = createHashRouter([
    {
       //...路由配置
    }
])

export default router

总结

本文为学习笔记，记录一下，感谢阅读！

avatar
文章
阅读
粉丝