flask做克隆网站,哈尔滨制作网站企业,wordpress 判断cli,网页设计首页多少钱一页一、认识ReactRouter
一个路径path对应一个组件component#xff0c;当我们在浏览器中访问一个path#xff0c;对应的组件会在页面进行渲染
创建路由项目
// 创建项目
npx create router-demo// 安装路由依赖包
npm i react-router-dom// 启动项目
npm run start
简单的路…一、认识ReactRouter
一个路径path对应一个组件component当我们在浏览器中访问一个path对应的组件会在页面进行渲染
创建路由项目
// 创建项目
npx create router-demo// 安装路由依赖包
npm i react-router-dom// 启动项目
npm run start
简单的路由小案例
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;import { createBrowserRouter, RouterProvider } from react-router-domconst router createBrowserRouter([{// http://localhost:3000/loginpath:/login,element:div登录/div},{// // http://localhost:3000/articlepath:/article,element:div文章/div}
])const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeRouterProvider router{router}/RouterProvider/React.StrictMode);
正式创建路由
1. 新建src/page
page下面新建每个路由对应的文件夹 Article/index.js
const Article () {return div我是文章页/div
}export default Article Login/index.js
const Login () {return div我是登录页/div
}export default Login
2. 然后创建src/router/index.js 路由配置文件
import Login from ../page/Login;
import Article from ../page/Article;import { createBrowserRouter } from react-router-dom;const router createBrowserRouter([{path:/login,element:Login /},{path: /article,element:Article /}
])export default router
3. 最后在src/index.js中注册
import React from react;
import ReactDOM from react-dom/client;
import router from ./routerimport { RouterProvider } from react-router-domconst root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeRouterProvider router{router}/RouterProvider/React.StrictMode);
二、路由导航
什么是路由导航 路由系统中的多个路由之间需要进行 路由跳转 并且在跳转的同时有可能需要 传递参数进行通信 声明式导航与编程式导航
声明式导航
指通过Link /组件描述要跳转到哪里比如后台管理系统的左侧菜单。
Link被解析成a链接传参通过字符串拼接实现。
Link to/article文章/Link
编程式导航
通过useNavigate钩子得到导航方法然后通过调用方法以命令式的方式进行路由跳转比如登录请求完毕之后跳转就可以选择这种方式。 个人总结就是声明式导航是html标签形式编程式导航是js函数形式。 import { Link, useNavigate } from react-router-dom
const Login () {const navigate useNavigate()return (div我是登录页{/* 声明式导航 */}Link to/articlego article/Link{/* 编程式导航 */}button onClick{() navigate(/article)}go article/button/div)
}export default Login vue小链接 声明式导航router-link to/article/router-link 编程式导航 this.$router.push(/article) vue2 const router useRouter() router.push(/article) vue3 导航传参
searchParams传参
跳转页发送参数
navigate(/article?id1001namejack)
目标页接收参数
// 别忘了 useSearchParams要导入const [params] useSearchParams()
const id params.get(id)
const name params.get(name)
params传参
跳转页发送参数
navigate(/article/1001/name)
目标页接收参数
//别忘了 useParams要导入const params useParams()
const id params.id
const name params.name
router/index.js
{path: /article/:id/:name,element:Article /
}
三、嵌套路由
嵌套路由配置 1. 使用children属性配置路由嵌套关系 2. 使用Outlet/组件配置二级路由渲染位置 定义一级路由Layout二级路由About、Board
// Layout/index.js
import { Link, Outlet } from react-router-domconst Layout () {return (divdiv 我是一级路由Layout /divLink to/board面板/Linkbr/Link to/about关于/Link{/* 二级路由出口 */}Outlet//div)
}export default Layout
// About/index.jsconst About () {return (div 我是二级路由About /div)
}export default About
// Board/index.jsconst Board () {return (div 我是二级路由Board /div)
}export default Board
路由配置文件
{path:/,element: Layout /,children:[{path:board,element: Board/},{path:about,element:About /}]
},
默认二级路由
{path:/,element: Layout /,children:[{// path:board,index: true,element: Board/},{path:about,element:About /}]
},
四、404路由配置 场景当浏览器输入url的路径在整个路由配置中都找不到对应的 path为了用户体验可以使用 404 兜底组件进行渲染 1. 准备一个NotFound组件 2. 在路由表数组的末尾以*号作为路由path配置路由 新增组件NotFound/index.js const NotFound () {return (divh1404 Not Found/h1/div)
}export default NotFound 路由配置 {path:*,element:NotFound/
} 五、两种路由模式 createBrowserRouter -- history模式
createHashRouter -- hash模式
