React新版本路由

news/2024/7/15 19:20:09 标签: react.js, 前端

与老版本5.x对比

内置组件的变化：移除<Switch/> ，新增 <Routes/>
语法：component={组件} ==> element={<组件/>}
新增hook：useParams、useNavigate、useMatch

history和哈希的使用和5.x版本一样

import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

App.jsx 中

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import Page1 from './pages/Page1'
import Page2 from './pages/Page2'

export default function App() {
  return (
    <div>
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/Page1">Page1</NavLink>
            <NavLink className="list-group-item" to="/Page2">Page2</NavLink>
            {/* 注册路由 */}
            <Routes>
               <Route path='/Page1' element={<Page2/>} />
               <Route path='/Page2' element={<Page2/>} />
            </Routes>
    </div>
  )
}

<Switch>被移除，替代者：<Routes>
<Routes>和<Switch>一样，如果匹配上了，往下就不会再匹配了，相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
<Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。
<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。
当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件。
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

src/routes/index.js

export default [
  // 路由表
  {
    path: '/Page1 ',
    element: <Page1 />
  },
  {
    path: '/Page2',
    element: <Page2 />
  },
  {
    path: '/',
    element: <Navigate to='/Page2' />
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: 'news',
        element: <News />
      },
      {
        path: 'message',
        element: <Message />
      }
    ]
  },


]

App.jsx

import React from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './routes/index';

export default function App() {
  
  const element = useRoutes(routes)
 
  return (
    <div>
         {element}
    </div>
  )
}

Home.jsx

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';

export default function Home() {
  return (
    <div>
      <div>
        <NavLink className="list-group-item" to="news">News</NavLink>
        <NavLink className="list-group-item" to="message">Message</NavLink>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  )
}

在v5中，NavLink高亮使用组件标签中的activeClassName属性，当你点击NavLink标签时，加哪个样式的类名, 在v6版本中，想要实现自定义的类名，需要把className的值写成一个函数。

再v6中使用路由懒加载

import { lazy, Suspense } from "react";
...
  {
    path: ' ',
    element: (
      <Suspense fallback={<h2>加载中....</h2>}>
        <lazy(() => import("../page/LazyTest"))/>
      </Suspense>)
  },
 
...