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`
相关推荐
Bottle4145 分钟前
深入探究 React Fiber(译文)
前端
汤姆Tom11 分钟前
JavaScript Proxy 对象详解与应用
前端·javascript
xiaopengbc17 分钟前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
伍哥的传说17 分钟前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
GISer_Jing19 分钟前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
全栈技术负责人1 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http
码上暴富1 小时前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Mintopia1 小时前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia1 小时前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso1 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx