后端上手学习React Router基础知识

前言

通过路由,每个页面都有一个唯一的 URL。用户可以直接访问某个页面, 有了前进和后退的功能,更好的传递状态,url上能携带参数。

BrowserRouter和HashRouter比较

BrowserRouter

  • 调用的是H5 history API,低版本兼容性问题。
  • 路径:localhost:3000/demo/a
  • 刷新后对路由state参数没有任何影响,因为state保存在history对象中。

HashRouter

  • 使用的是URL哈希值
  • 路径:localhost:3000/#/demo/a
  • 刷新后会导致路由state参数的丢失!!!

全局绑定路由数组的形式

通过js定义createBrowserRouter指定路由数组,然后通过Provider提供绑定路由。即可实现完整的路由构建。

scss 复制代码
// 接收数组
const globalRouters = createBrowserRouter([])

接收的数组中的对象常用的参数:

  • path : 路径
  • element: 组件标签
  • children : 内部嵌套路由(对于组件上需要使用<Outlet></Outlet>
css 复制代码
[  {      path: '/home',      element: <Home />,  },]

最后在根目录下绑定全局的路由

ini 复制代码
<RouterProvider router={globalRouters}>

使用标签形式构建路由

一层一层的通过Route来制定每一层的路由路径和对应的组件内容。如果嵌套路由,需要route再往下一级再指定。

xml 复制代码
<BrowserRouter>
    <Routes>
        <Route path='/' element={<Login />} />
        <Route path='home' element={<App />}>
            <Route path='page1' element={<Page1 />} />
            <Route path='page2' element={<Page2 />} />
            <Route path='page3' element={<Page3 />} />
        </Route>
    </Routes>
</BrowserRouter>

路由插槽 Outlet

注意在使用嵌套路由的时候,父路由有提供占位的地方,由子路由匹配到的组件填补上去。

如下App组件内部有标签<Outlet/>来提供占位。

javascript 复制代码
function App(props) {
  return (
    <div>
      <h1>标题1</h1>
      <Outlet />
    </div>);
}
export default App;

此时如果父路由完全匹配,则会呈现子索引路由;如果没有索引路由,则不会呈现任何内容

xml 复制代码
<Route path="/" element={<App />}>
  <Route path="messages" element={<DashboardMessages />}/>
  <Route path="tasks" element={<DashboardTasks />} />
</Route>

兜底路由

可以通过route指定*来实现最后兜底能指定的路由组件,表明最后一定有匹配到的组件内容

ini 复制代码
<Route path="*" element={<View />}>

实现路由跳转

js实现跳转

可以通过hook,使用useNavigate来实现路由的跳转

scss 复制代码
const navigate = useNavigate()
navigate('/home')

注意: useNavigate 需要使用在Router标签的包裹下,可以将HashRouter或者是 BrowserRouter 包裹在全局下,这样就能函数下都能使用了。也要保证在函数组件中哦。

通过标签实现跳转

  • <Link> 是一个基础的导航组件,用于在应用内创建超链接
  • <NavLink><Link> 的增强版,专门用于导航链接。它会在当前 URL 匹配 to 属性时自动添加一个 active 类名(默认为 active),从而便于高亮显示当前选中的导航项
ini 复制代码
<Link to="/page/page1">跳转</Link>
<NavLink to="/page/page1">跳转Page1</NavLink>

注意使用Link的时候,也要需要使用在Router标签的包裹下,可以将HashRouter或者是 BrowserRouter

路由参数

v6版本search形式获取值

react-router-dom v6版本新增 useSearchParams ,比较推荐使用

scss 复制代码
// 上传参数
navigate("/page1?name=Eula&age=18");
// 获取参数
let [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('name')) //  "Eula"
console.log(searchParams.get('age')) //  18

通过params路径占位传参数

一般用于在地址路径上占位参数,例如 "/page1/:name/:age"

第一种通过路由配置表配置参数占位(配置)

css 复制代码
{
  path: "/",
  element: withLoadingComponents(<Home />), 
  children: [
    {
      path: "/page1/:name/:age",//注意这里 可以占位多个
      element: withLoadingComponents(<Page1 />)
    },
  ]
},

第二种通过js跳转路由时传入参数

scss 复制代码
navigate("/page1/Eula/18");

此时都可以通过useParams方法来获取参数,会封装成对象。

vbscript 复制代码
// 使用useParams 函数
const params = useParams()
console.log("params:",params);// 打印 {   "name": "Eula",    "age": "18"}

通过state传对象

使用state传参时,参数需要放到state对象里面;

注意:此时路由上不能有params 传参时的参数占位,否则无法跳转;

javascript 复制代码
// 传参
navigate("/page1",{ state: {name:'Eula',age:"18"}});
<Link to="new-path" state={{ some: "value" }} />

// 获取参数
// 获取navigate中传递的state中的信息
let location = useLocation(); 
console.log("params:",location); 

location 对应的对象的参数

  • hash : 当前 URL 的哈希值
  • key : 该位置的唯一密钥
  • pathname : 页面路径
  • search : 当前 URL 的查询字符串
  • state : 针对传入的参数对象
相关推荐
一枚前端小能手43 分钟前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser44 分钟前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白1 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
织_网1 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
vvilkim2 小时前
深入理解 Spring Boot Starter:简化依赖管理与自动配置的利器
java·前端·spring boot
艾小码2 小时前
前端安全防护手册:对抗XSS、CSRF、点击劫持等攻击
前端·安全·xss
2401_837088502 小时前
setup 语法糖核心要点
开发语言·前端·javascript
用户3379044802173 小时前
HTML5语义化标签详解
前端
唐某人丶3 小时前
教你如何用 JS 实现一个 Agent 系统(1)—— 认识 Agentic System
前端·人工智能
丘山子3 小时前
分享链接格式不统一,rel="share-url" 提案试图解决这个问题
前端·面试·html