【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>

// 从 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）

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()路由表

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

// 路由表
// 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

// 引入路由表
// 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"

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

// 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>
  )
}

使用路由表的嵌套路由：

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

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

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