【React系列六】—React学习历程的分享

前言

接系列五讲解Router5之后,最新的路由版本是React-Router6,一些新增特性及使用方法讲解

一、Router6和Router5的区别

React Router 发布了三个不同的包:

  • react-router:路由核心库,提供许多组件、钩子
  • react-router-dom:包括了 react-router 所有内容,同时添加了用于 DOM 的组件,如 <BrowserRouter>
  • react-router-native:包括了 react-router 所有内容,同时添加了用于 ReactNative 的 API,如 <NativeRouter>

与 React Router 5.x 版本的区别:

  • 内置组件的变化:移除 <Switch />,新增 <Routes />......
  • 语法变化:component={About} 变成 element={<About/>}......
  • 新增 hook:useParams、useNavigate、useMatch......
  • 官方明确表示推荐使用函数式组件

二、安装及其基本使用

npm install react-router-dom

index.js文件引入<BrowserRouter>

javascript 复制代码
// 从 react-dom/client 引入 ReactDOM
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

// React 18 的语法发生改变了
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

基本使用

<BrowserRouter> 用于包裹整个应用。

<HashRouter> 修改的是地址栏的 hash 值。

6.x 版本中 <HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

6 版本中移出了 <Switch>,引入了新的替代者:<Routes>。

<Routes> 和 <Route> 要配合使用,且必须要用 <Routes> 包裹 <Route>

三、路由重定向

只要 <Navigate> 组件被渲染,就会修改路径,切换视图。可用于路由重定向

replace 属性用于控制跳转模式(push 或 replace,默认是 push)

javascript 复制代码
import { NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './components/About/About'
import Hello from './components/Hello/Hello'

export default function App() {
  return (
    <div>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/hello">Hello</NavLink>
      <hr />
      <Routes>
        <Route path="/about" element={<About />}></Route>
        <Route path="/hello" element={<Hello />}></Route>
        <Route path="/" element={<Navigate to="/about" />}></Route>
      </Routes>
    </div>
  )
}

四、useRoutes()路由表

路由规则可以单独抽出一个模块、一个文件统一管理路由

javascript 复制代码
// 路由表
// routes/index.js
import { Navigate } from 'react-router-dom'
import About from '../components/About/About'
import Hello from '../components/Hello/Hello'

const routes = [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/hello',
    element: <Hello />,
  },
  {
    path: '/',
    element: <Navigate to="/about" />,
  },
]

export default routes
javascript 复制代码
// 引入路由表
// App.js
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'

export default function App() {
  // 生成路由规则
  const element = useRoutes(routes)

  return (
    <div>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/hello">Hello</NavLink>
      <hr />
      {element}
    </div>
  )
}

五、嵌套路由

  • 嵌套路由中,需要使用 <Outlet> 设置子路由的路由出口,即在何处渲染子路由
  • 设置二级路由链接时,可以是 to="news"、to="./news",但不能是 to="/news"

不使用路由表的嵌套路由:

javascript 复制代码
// App.js
export default function App() {
  return (
    <div>
      <NavLink to="about">About</NavLink>
      <NavLink to="hello">Hello</NavLink>
      <hr />
      <Routes>
        <Route path="about" element={<About />} />
        <Route path="hello" element={<Hello />}>
          <Route path="news" element={<News />} />
          <Route path="message" element={<Message />} />
        </Route>
        <Route path="/" element={<Navigate to="about" />} />
      </Routes>
    </div>
  )
}

使用路由表的嵌套路由:

javascript 复制代码
// 路由表
const routes = [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/hello',
    element: <Hello />,
    // 定义二级路由,注意不要加 /
    children: [
      {
        path: 'news',
        element: <News />,
      },
      {
        path: 'message',
        element: <Message />,
      },
    ],
  },
  {
    path: '/',
    element: <Navigate to="/about" />,
  },
]

有不明白的或者有其他问题的可以评论区留言噢

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步,成为更好的自己!

相关推荐
用户1456775610371 分钟前
干净的图片批量处理,处理速度飞快
前端
用户14567756103722 分钟前
亲测好用!简单实用的图片尺寸调整工具
前端
2301_7909949923 分钟前
仿神秘海域/美末环境交互的程序化动画学习
学习·microsoft·交互
索西引擎23 分钟前
npm、yarn、pnpm
前端·npm·node.js
能不能别报错31 分钟前
K8s学习笔记(十六) 探针(Probe)
笔记·学习·kubernetes
初圣魔门首席弟子36 分钟前
C++ STL 向量(vector)学习笔记:从基础到实战
c++·笔记·学习
qiangshang9901261 小时前
WPF+MVVM入门学习
学习·wpf
iconball1 小时前
个人用云计算学习笔记 --20 (Nginx 服务器)
linux·运维·笔记·学习·云计算
天生我材必有用_吴用1 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发