React - router 基础应用

安装

复制代码
npm install react-dom-router

注册路由

jsx 复制代码
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Homepage from "./pages/Homepage";
import AppLayout from "./pages/AppLayout";
import PageNotFound from "./components/PageNotFound";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Homepage />} />
        <Route path="app" element={<AppLayout />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>
  );
}
  • 使用Route注册路由,需要BrowserRouterRoutes包裹
  • path属性是路径,加/是从根路径开始,不加/则直接添加到父路径前
  • element是该路径需要渲染的组件或元素
  • 使用index替代path时,直接在父路径(这里是/)中渲染该组件(元素),即默认的子路由
  • path*时是所有路由均匹配不到时渲染的组件(元素),一般是404页面

嵌套路由

嵌套路由只需在Route标签内注册即可,需要与Outlet配合使用

jsx 复制代码
function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

Outlet相当于Vue中的router-view,当路径完全匹配时(这里是/task)时,会在<Outlet />的位置渲染指定组件(这里是<DashboardTasks />

jsx 复制代码
import { Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}
jsx 复制代码
import { NavLink } from "react-router-dom";
import styles from "./AppNav.module.css";

function AppNav() {
  return (
    <nav className={styles.nav}>
      <ul>
        <li>
          <NavLink to="cities">Cities</NavLink>
        </li>
        <li>
          <NavLink to="countries">Countries</NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default AppNav;
  • NavLinkLink十分类似,区别就是NavLink在与当前路径匹配的情况下下,会有一个active属性,方便我们去书写样式
  • to属性是要跳转的路径

渲染时,<Navigate />元素会更改当前位置,一般用于进入父类由时默认跳转至子路由

jsx 复制代码
<Route path="app" element={<AppLayout />}>
  <Route index element={<Navigate replace to="cities" />} />
  <Route
    path="cities"
    element={<CityList />}
  />
</Route>
  • 在我们进入app路径时,会重定向至app/cities路径
  • replace属性允许我们回退至上一路径
  • to属性是我们要跳转的子路径

useNavigate钩子返回一个函数,该函数允许我们使用编程方式进行导航(类似Vue中的router.push

jsx 复制代码
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate(-1) //跳转至上一路径 (back)
navigate("form") //跳转至 `父路径/form`
相关推荐
阿喵派我来抓鱼1 小时前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务6 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友6 小时前
什么是断言?
前端·后端·安全
FIN66687 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4957 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1247 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树7 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端