网站系统升级,天津做做网站,网站开发不让搜索引擎,百度关键词搜索趋势1. 嵌套路由
在一级路由中又内嵌了其他路由#xff0c;这种关系就叫做嵌套路由。
2. 嵌套路由配置 // /page/About/index.js
const About () {return (div二级路由 About 组件/div)
}export default About// /page/Layout/index.js
import { Outlet, …1. 嵌套路由
在一级路由中又内嵌了其他路由这种关系就叫做嵌套路由。
2. 嵌套路由配置 // /page/About/index.js
const About () {return (div二级路由 About 组件/div)
}export default About// /page/Layout/index.js
import { Outlet, Link } from react-router-domconst Layout () {return (div一级路由 Layout 组件Link to/aboutAbout/Link{/* 2. 配置二级路由出口 */}Outlet/Outlet/div)
}export default Layout// /router/index.js
import Login from ../page/Login
import Article from ../page/Article
import { createBrowserRouter } from react-router-dom
import Layout from ../page/Layout
import About from ../page/About
const router createBrowserRouter([{path: /login,element: Login/Login},{// /:id/:name 占位符path: /article/:id/:name,element: Article/Article},{path: /,element: Layout/Layout,// 1. 使用 children 属性配置路由嵌套关系children: [{path:about,element: About/About}]}
])export default router3. 默认二级路由
当访问的是一级路由时默认的二级路由组件可以得到渲染。
以下案例希望设置面板组件为二级默认组件得到渲染。
// /page/Layout/index.js
import { Outlet, Link } from react-router-domconst Layout () {return (div一级路由 Layout 组件{/* 配置二级路由出口 */}Link to/aboutAbout/Link{/* 2. 相当于根目录即可渲染 Board */}Link to/Board/LinkOutlet/Outlet/div)
}export default Layout// /router/index.js
import Login from ../page/Login
import Article from ../page/Article
import { createBrowserRouter } from react-router-dom
import Layout from ../page/Layout
import About from ../page/About
import Board from ../page/Board
const router createBrowserRouter([{path: /login,element: Login/Login},{// /:id/:name 占位符path: /article/:id/:name,element: Article/Article},{path: /,element: Layout/Layout,children: [{path:about,element: About/About},// 1. 设置为默认二级路由一级路由访问的时候也可以得到渲染。去掉path设置index属性为true。{index: true,element: Board/Board}]}
])export default router4. 404 路由配置
// 写在 router 底部兜底配置
{path: *,element: NotFound/NotFound
}5. 两种路由模式
各个主流框架的路由常用的路由模式有俩种history 模式和 hash 模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
路由模式url表现底层原理是否需要后端支持historyurl/loginhistory 对象 pushState 事件需要hashurl/#/login监听 hashChange 事件不需要
