2018年网站开发陕西企尚网络科技有限公司

2018年网站开发,陕西企尚网络科技有限公司,网站缩略图尺寸,定制网站制作广州React Router官方文档#xff1a;https://reactrouter.com.cn/ react-router中路由模式分为#xff1a;框架模式、 数据模式、声明式模式 以下仅为 * 数据模式 * 的使用笔记 安装 当前版本v7 npm install react-router使用createBrowserRouter创建路由配置#xff0c;支…React Router官方文档https://reactrouter.com.cn/react-router中路由模式分为框架模式、 数据模式、声明式模式以下仅为 * 数据模式 * 的使用笔记安装 当前版本v7npm install react-router使用createBrowserRouter创建路由配置支持普通路由和嵌套路由。router/index.jsimport{createBrowserRouter}fromreact-router;importIndexfrom/pages/Index;importUserfrom/page/User;importLoginfrom/page/Login;constroutercreateBrowserRouter([// 普通路由{path:/,Component:Index,},// 嵌套路由{path:/user,Component:User,children:[{// path: login,index:true,// 默认路由Component:Login,},{path:register,Component:Register,},]}]);exportdefaultrouter;使用RouterProvider绑定路由 main.jsimport{RouterProvider}fromreact-router/dom;importrouterfrom./router/index.js;createRoot(document.getElementById(root)).render(StrictModeProvider store{store}{/* App / */}{/* 绑定路由 */}RouterProvider router{router}//Provider/StrictMode);组件内通过Outlet展示子路由Link/NavLink实现导航import{Outlet,Link}fromreact-router;exportdefaultfunctionUser(){return(divh1用户/h1Link to/user登录/LinkLink to/user/register注册/Link{/* 二级路由出口 */}Outlet//div);}路由导航4.1 Linkimport{Link}fromreact-router;Link to/首页/LinkLink to/about关于/Link4.2 NavLink 需要渲染活跃和待处理状态的导航链接import{NavLink}fromreact-router;NavLink to/messagesclassName{({isActive,isPending,isTransitioning})[isPending?pending:,isActive?active:,isTransitioning?transitioning:,].join( )}Messages/NavLink4.3 FormForm action/searchinput typetextnameq//Form4.4 重定向redirectimport{redirect}fromreact-router;exportasyncfunctionloader({request}){letuserawaitgetUser(request);if(!user){returnredirect(/login);}return{userName:user.name};}4.5 编程式 useNavigateimport{useNavigate}fromreact-router;exportfunctionuseLogoutAfterInactivity(){letnavigateuseNavigate();useFakeInactivityHook((){// navigate(/logout);// 使用navigate函数并设置replace为true来替换当前历史记录navigate(/logout,{replace:true});});}4.6 路由导航传参 useSearchParams 、useParams// 4.6.1 searchParams传参navigate(/user?id123);// 取const[params]useSearchParams();letidparams.get(id);// 4.6.2 params传参navigate(/user/123);// 取const[params]useParams();letidparams.id;Hooks解析useLocation 返回当前的 Location包含有关 URL 路径的信息以及可能的一些任意状态和键。// 属性{pathname:/index,// URL 路径名以 / 开头。search:,// URL 查询字符串以 ? 开头。hash:,// URL 片段标识符以 # 开头。state:null,// 与此 location 关联的任意数据值。key:f5ecz0os// 与此 location 关联的唯一字符串。 可用于在其他存储 API如 localStorage中安全地存储和检索数据。注意此值在初始 location 上始终为 default。}