网络传媒网站,镇江制作网站的,专科网站建设论文,seo短视频网页入口引流网站React Router 6 VS React Router 5.x
内置组件的变化; 移除Switch / , 新增Routes /语法的变化; component { About } 变为 element { About / }新增多个hook官方明确推荐函数式组件了!
一级路由(变化)
安装路由 npm i react-router-dom (默认是最…React Router 6 VS React Router 5.x
内置组件的变化; 移除Switch / , 新增Routes /语法的变化; component { About } 变为 element { About / }新增多个hook官方明确推荐函数式组件了!
一级路由(变化)
安装路由 npm i react-router-dom (默认是最新版本)路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作呈现路由的时候,需要注册路由 实用Routes代替了Switch; Switch当时写了是涉及到了一个匹配效率的问题,匹配到了就不会继续往下匹配,之前是一定要写
componen { About } 变为 element { About / } 重定向 Navigate(变化)
作用; 只要Navigate 组件被渲染,就会修改路径,切换视图replace属性用于控制跳转模式, (push 或 replace, 默认是push) 规则
{/* 注册路由 */}
RoutesRoute path/ABOUT element{About/}/Route path/home element{Home/}/Route path/ element{Navigate to/about/}/
/RoutesNavLink高亮(变化)
你要想自定义类名,需要把className写成一个函数的形式
较长的时候,抽出一个函数
function computedClassName({isActive}){return isActive ? list-group-item atguigu : list-group-item
}
// 在路由中使用高亮的自定义属性
div classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink className{computedClassName} to/aboutAbout/NavLinkNavLink className{computedClassName} to/homeHome/NavLink/div
/divuseRoutes路由表
将之前那一堆抽取出去, 使用hooks来处理
export default [{path:/about,element:About/},{path:/home,element:Home/},{path:/,element:Navigate to/about/}
]
// 引入上述代码, 然后使用hooks
const element useRoutes(routes)
// 使用路由表
div classNamepanel-body{/* 注册路由 */}{element}
/div嵌套路由
直接在路由表中加上相应的children属性, 用于相关操作
export default [{path:/about,element:About/},{path:/home,element:Home/,children:[{// 注意; 子级路由不用加上斜杠path:news,element:News/},{path:message,element:Message/}]},{path:/,element:Navigate to/about/}
]使用Outlet来指定路由呈现的位置
divh2Home组件内容/h2divul classNamenav nav-tabsli{/* 书写子级路由的时候不需要传参 */}NavLink classNamelist-group-item tonewsNews/NavLink/liliNavLink classNamelist-group-item tomessageMessage/NavLink/li/ul{/* 指定路由组件呈现的位置 */}Outlet //div
/div
