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注册路由，需要BrowserRouter和Routes包裹
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>
  );
}

NavLink 与 Link

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;

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

Navigate 与 useNavigate

渲染时，<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`