笔记：React Router v6

安装

官网： https://reactrouter.com/

npm install react-router react-router-dom

Router

• 路由器分两种：<BrowserRouter> 和 <HashRouter> ，使用时一般包裹到<App>的外侧。

import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

相关组件

• <Routes> 包裹多个 <Route>，匹配到对应路由后暂停，展示匹配路由组件。
• <Route> 为展示区，展示对应路由的页面。
  exact属性开启精确匹配，多级路由谨慎使用。
  repalce属性开启replace路由跳转模式。
  caseSensitive属性设置路由地址区分大小写。
• <Link> 为导航按钮，点击修改URL，本质是一个超链接。
• <NavLink> 为高亮导航按钮。
  className属性为一个函数，每次点击导航按钮时都会被调用，并传入isActive布尔值。
  end属性设置展示子路由组件时，父导航按钮不高亮。
• <Navigate> 只要加载就会引起路由页面重定向。
• <Outlet> 当使用路由表时，指定路由组件呈现的位置。

import { Link, NavLink, Routes, Route, Redirect } from 'react-router-dom';

<Link to="/page1"></Link>
<NavLink to="/page1" ClassName={ ({ isActive }) => isActive ? 'style1' : 'style2' }></NavLink>
<Routes>
  <Route exact path="/" element={ <Navigate to="/page1" /> } />
</Routes>

路由传参

1. Params参数： 其他组件通过URL传参至当前组件，当前组件读取参数。

this.props.match.params

2. Query参数： 其他组件通过URL传参至当前组件，当前组件读取参数。

import qs from 'query-string'
// 传参转换
qs.stringify({})
// 接受转换
const { search } = this.props.location
const { query } = qs.parse(search.slice(1))

3. State参数： <HashRouter>使用该方式传参，页面刷新后会丢失数据。

// 传参
<Link to='/page1' state={{ key: value }}></Link>
// 接收
this.props.location.state

编程式导航

• 路由组件传入的props中，使用history的方法来控制页面的跳转切换。

this.props.history.replace(`/page1`, { key: value })
this.props.history.push(`/page1`, { key: value })
this.props.history.go(-1)
this.props.history.goBack()
this.props.history.goForward()

• 当非路由类组件也想获取路由组件的信息时，可以包裹一层withRouter()。函数组件是不需要的。

export default withRouter(A)

Hooks

1. useRoutes
   ①用于制定路由表，代替<Routes>的内容。
   ②多级路由不需要写父级前缀和/。

// 路由表
export default const routes = [
  {
    path: '/page1',
    element: <A />,
    children: []
  },
  {
    path: '/',
    element: <Navigate to="/page1" />,
  }
])
// 组件中引入
const element = useRoutes(routes)

2. useParams
   ①获取路由组件Params参数。

const { params } = useParams()

3. useMatch
   ①获取指定路由地址的match属性。

const match = useMatch('/page1')

4. useSearchParams
   ①获取和修改路由组件Query参数。

const [search, setSearch] = useSearchParams()
search.get('key')
setSearch('key1=value1&key2=value2')

5. useLocation
   ①获取路由组件的location属性，或State参数。

const location = useLocation()

6. useNavigate
   ①编程式路由跳转到指定路由。

const navigate = useNavigate()
navigate('/page1', {
  replace: false,
  state: {}
})
// 类似history.go
navigate(1)

7. useInRouterContext
   ①判断组件是否被路由器Router所包裹，返回布尔值。

const res = useInRouterContext()

8. useNavigationType
   ①判断当前的导航类型是POP（刷新）、PUSH、REPLACE中的哪个。

const res = useNavigationType()

9. useOutlet
   ①获取已经渲染的子路由组件信息。

const res = useOutlet()

10. useResolvedPath
    ①解析一个URL为path、search、hash的对象形式。

const res = useResolvedPath()

路由组件懒加载

• lazy()将组件设置路由懒加载组件。
• <Suspense> 包裹路由懒加载组件，在未渲染时展示Loading组件。

import { lazy, Suspense } from 'react'

const A = lazy(() => import('./components/A'))
<Suspense fallback={ <Loading /> }>
    <Route path="/page1" element={ <A /> } />
</Suspense>