极简React教程 Day Three —— 路由

react-router语法

路由的导入

npm install react-router-dom@6

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";


...
return(
    <BrowserRouter> //BrowserRouter包裹住需要路由的部分
        <Routes>  //Routes包裹住声明路由的部分
          <Route path="/" element={<App />}> //路由的声明部分
            <Route index element={<Home />} />
            <Route path="teams" element={<Teams />}> //Route包裹住其子路由
              <Route path=":teamId" element={<Team />} />
              <Route path="new" element={<NewTeamForm />} />
              <Route index element={<LeagueStandings />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
)

Link —— 跳转链接组件

Link是个组件，点击该组件即可跳转到to后面的路由

import { Link } from "react-router-dom";

export default function App() {
 return (
   <div>
     <h1>Bookkeeper</h1>
     <nav
       style={{
         borderBottom: "solid 1px",
         paddingBottom: "1rem",
       }}
     >
       <Link to="/invoices">Invoices</Link> |{" "}
       <Link to="/expenses">Expenses</Link>
     </nav>
   </div>
 );
}

Outlet —— 嵌套路由父节点留白的起点

声明其子路由的起点，也就是说子节点从此标签开始渲染，渲染时此标签之上父节点的组件仍然渲染。

import { Outlet, Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem",
        }}
      >
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
      <Outlet />
    </div>
  );
}

useLocation —— 获得当前页面的url

location为当前页面的url

import { useLocation, NavLink } from "react-router-dom";

function QueryNavLink({ to, ...props }) {
  let location = useLocation();
  return <NavLink to={to + location.search} {...props} />;
}

useNavigate —— 获得跳转函数

获得navigate跳转函数

import {
  useParams,
  useNavigate,
  useLocation,
} from "react-router-dom";
import { getInvoice, deleteInvoice } from "../data";

export default function Invoice() {
  let navigate = useNavigate();
 ...

  return (
    <main style={{ padding: "1rem" }}>
        <button
          onClick={() => {
            deleteInvoice(invoice.number);
            navigate("/invoices" + location.search);
          }}
        >
    </main>
  );
}

useParams —— 使组件获取url后面的全部参数

params为url最后一位的参数

import { useParams } from "react-router-dom";

export default function Invoice() {
  let params = useParams();
  return <h2>Invoice: {params.invoiceId}</h2>;
}

useSearchParams —— 获取url后面某个参数

next.js的路由

待补充