欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react-router?v6新特性總結(jié)示例詳解

 更新時(shí)間：2022年12月26日 15:05:36   作者：xiangzhihong8  
在V6版本中，<Switch>組件被替換成<Routes>組件，同時(shí)，component屬性被element屬性替換，這篇文章主要介紹了react-router?v6新特性總結(jié),需要的朋友可以參考下

由于之前的項(xiàng)目一直使用的是V5版本，最新新建項(xiàng)目的時(shí)候，默認(rèn)使用的是V6版本，根據(jù)官方的介紹，V6版本的新特性如下。

新特性

  • <Switch>重命名為<Routes>；
  • <Route>的新特性變更；
  • 嵌套路由變得更簡(jiǎn)單；
  • 新鉤子useRoutes代替react-router-config；
  • 用useNavigate代替useHistory；
  • Link不再支持component 屬性；
  • NavLink的exact屬性替換為end
  • 大小減少：從20kb到8kb

<Switch>重命名為<Routes>

在V6版本中，<Switch>組件被替換成<Routes>組件，同時(shí)，component屬性被element屬性替換。

/* v5 */
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/user/:id" render={(routeProps) => <User id={routeProps.match.params.id} />} />
</Switch>

/* V6 */
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="user/:id" element={<User id={id} />} />
</Routes>

同時(shí)，組件還修改了如下一些內(nèi)容：

  • 廢棄exact
  • component/render被element替代
  • routeProps可以在element中直接獲取
  • 簡(jiǎn)化的路徑匹配，僅支持動(dòng)態(tài):id樣式參數(shù)和*通配符，不再支持RegExp

支持嵌套路由

在V6版本中， <Route>標(biāo)簽支持嵌套，可以在一個(gè)文件內(nèi)配置嵌套路由，便于統(tǒng)一管理路由。

import { HashRouter as Router, Routes, Route } from 'react-router-dom'
import Home from '@/pages/demo/Home'
import Foo from '@/pages/demo/Foo'
import Bar from '@/pages/demo/Bar'
import BarDetail from '@/pages/demo/BarDetail'
import '@/assets/style/App.css'
function App() {
 return (
   <Router>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="foo" element={<Foo />} />
       {/* 嵌套路由場(chǎng)景：需要在Bar（父路由的組件）聲明Outlet組件，用于渲染子路由 */}
       <Route path="bar" element={<Bar />}>
         <Route path=":id" element={<BarDetail />} />
       </Route>
     </Routes>
   </Router>
 )
}
export default App

Outlet

在嵌套路由場(chǎng)景，我們需要在父路由中使用Outlet組件，用于渲染子路由。

import { Outlet } from 'react-router-dom'
function Bar() {
  return (
    <div>
      <div>Bar</div>
      {/* 有嵌套路由的場(chǎng)景需要使用 */}
      <Outlet />
    </div>
  )
}
export default Bar

嵌套路由可配置化

在V6版本中，我們可以使用useRoutes代替react-router-config配置。如果需要用到嵌套路由，那么Outlet組件也是必要的。

import { useRoutes } from 'react-router-dom'
import Home from '@/pages/demo/Home'
import Foo from '@/pages/demo/Foo'
import Bar from '@/pages/demo/Bar'
import BarDetail from '@/pages/demo/BarDetail'
import '@/assets/style/App.css'
function App() {
  let element = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: 'foo',
      element: <Foo />
    },
    {
      path: 'bar',
      element: <Bar />,
      children: [
        {
          path: ':id',
          element: <BarDetail />
        }
      ]
    }
  ])
  return element
}
export default App

需要注意的是，如果是使用此方式注冊(cè)路由配置，需要在入口文件添加Router包裹App組件，否則會(huì)報(bào)錯(cuò)。

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router } from 'react-router-dom'
import App from '@/App'
import '@/assets/style/index.css'
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
)

useNavigate代替useHistory

/* v5 */
const history = useHistory()
history.push('/home')
history.replace('/home')
history.goBack()
history.goForward()
history.go(2)
/* V6 */
const navigate = useNavigate()
navigate('/home')
navigate('/home', {replace: true})
navigate(-1)
navigate(1)
navigate(2)

參考說(shuō)明：https://reactrouterdotcom.fly.dev/

到此這篇關(guān)于react-router v6新特性總結(jié)的文章就介紹到這了,更多相關(guān)react-router v6新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論