标签
1<BrowserRouter>用于包裹整个应用(通常为App组件)
2<HashRouter>
说明:作用与BrowserRouter一样,但<HashRouter>修改的是地址栏的hash值
router6.X和router5.X相同,
3<Routes />和<Route />
v6版本移除了先前的<Switch >,引入了新的替代者:<Routes>
<Routes>包裹<Route>配合使用,
<Route>相当于一个 if 语句,如果其路径与当前URL匹配,则呈现其对应的组件
<Route caseSensitive>属性用于指 定:匹配时是否区分大小写,默认false
<Route>也可以嵌套使用,配合useRoutes()配置路由表,但需要通过Outlet组件来渲染其子路由
4<LINK>使用to参数来描述需要定位的页面。它的值既可是字符串,也可以是location对象(包含pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象。
5<NavLink>与<Link>类似,且可实现导航的“高亮”效果
6<Navigate>
作用:只要<Navigate>组件被渲染,就会修改路径,切换视图
replace属性用于控制跳转模式(push或是replace,默认push)
7<Outlet>
当<Outlet>产生嵌套时,渲染其对应的后续子路由
Hooks:
1.useRotes()
根据路由表,动态创建<Routes>和<Route>
2.useNavigate()
作用:返回一个函数用来实现编程式导航
const navigate = useNavigate()
navigate('/login',{ replace:false, state:{a:1,b:2} })
第一种使用方式,指定具体的路径,
navigate( -1)
第二种使用方式,传入数值就行前进或后退,类似于5.X中的history.go( )方法,
3.useParams()
作用:回当前匹配路由的params参数,类似于5.x中的math.paramas
4.useSearchParams()
作用:用于读取和修改当前位置的URL中的查询字符串
返回一个包含两个值的数组,内容分别为:当前search参数,更新search的函数
const [search,setSearch] = useSearchParams();const id search.get('id');用search通过get方法需要单独取出
5.useLocation()
作用:获取当前location信息,对标5.X中的路由组件的location属性
const x=useLocation();console.log(x);//{hash:"",key:"aaa",search:"?name=zs&age=18",state:{a:1,b:2} }
6.useMatch()
作用:返回当前匹配信息,对标5.X中的路由组件的match属性。
const match = useMatch( '/login/:x/:y' )
console.log(match)
{ params:{x:'1',y:'10'},pathname:"/LoGin/1/10",pathnameBase:"/LoGin/1/10",pattern:{path:'/login/:x/:y',caseSensitive:false,end:false} }
7.useInRouterContext处于路由的上下文当中会返回布尔值true
8.useNavigation Type() 判断路由跳转方式
作用:返回当前的导航类型(用户如何来到当前页的)
返回值:POP(浏览器刷新页面、在浏览器直接打开了这个路由组件)、PUSH、REPLACE
9.useOutlet() 用来呈现当前组件中要渲染的嵌套路由
const result = useOutlet();console.log(result)
如果嵌套路由没有挂载,则返回null;如果嵌套路由已挂载,则展示嵌套的路由对象
10.useResolvedPath() 截取路由内的路径和参数
作用:给定一个URL值,解析其中的:path\search\hash值
小记:
1.路由表统一管理路由:二级路由path后不用加/,直接写名称
2.需求如果是点击二级路由后一级路由设置成不高亮的话可以给App内标签<NavLink end>添加end属性
3.页面中to后边的路由可以不用加/,直接写地址
4.react-router5和6内都有Link和NavLink,点击后---才能变成<a />标签,6内有了一个新的Navigate,有机会渲染到页面上才做更新