React 路由
概述
与 React Router 5.x 的区别:
内置组件的变化:移除 <Switch/>
,新增<Routers>
等
语法的变化:component = {Home}
,element = {<Home/>}
等
新增多个hook:useParams
、useNavigate
、useMatch
等
安装路由
安装(@6.3.0 最新版本)
方法一
npm i react router dom
方法二
npm i react-router-dom@6.3.0 --save
引入
import {
BrowserRouter,HashRouter,Routes,Route,link} from 'react-router-dom'
路由的使用
组成部分:<HashRouter>
,<BrowserRouter>
,<Routes/> 与 <Route>
,<Link>
,<NavLink>
,<Navigate>
,<Outlet>
HashRouter
<!-- 路由模型,HashRouter hash模型 -->
<HashRouter></HashRouter>
BrowserRouter
BrowserRouter:封装了 history 的创建,不需要再自己创建 history 对象。用于包裹整个应用
<!-- 路由模型,BrowserRouter history模型 -->
<BrowserRouter>
...
</BrowserRouter>
Routes 与 Route
Routes 与 Route:Route 是路由配置的具体实现,它置顶当路径匹配的时候渲染哪一个 UI
<Router>
要与 <Route>
一起使用,前者包裹后者
<Route index >
属性用于指定:匹配时是否