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`
相关推荐
千码君201619 分钟前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20092 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔3 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼3 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔3 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔3 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀3 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP3 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost4 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求