【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" />,
  },
]

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

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

相关推荐
光明中黑暗16 分钟前
Python 学习笔记
笔记·python·学习
聪明的墨菲特i22 分钟前
VUE组件学习 | 六、v-if, v-else-if, v-else组件
前端·vue.js·学习·前端框架·vue
Wonderful_Wan81 小时前
【前端项目工程】Uni-app 离线打包apk
前端·uni-app
木子七1 小时前
Js内建对象
前端·javascript
GDAL2 小时前
HTML入门教程2:HTML发展历史
前端·html
前端Hardy2 小时前
HTML&CSS:3D旋转动画机器人摄像头
前端·css·3d·html
月巴月巴白勺合鸟月半2 小时前
使用C#学习Office文件的处理(pptx docx xlsx)
学习·microsoft·c#·excel·office
S hh2 小时前
【Linux网络】UdpSocket
linux·运维·服务器·网络·学习
WwangXue2 小时前
mac如何下载 测试旧版chrome兼容问题
前端·chrome
浏览器爱好者2 小时前
Chrome和Firefox如何保护用户的浏览数据
前端·chrome·firefox