react-router-dom V6

[Twlig]

react-router-dom V6

react-router-dom是react路由，是实现SPA应用的关键。可以在不进行页面跳转的情况下，根据URL地址动态展示相应的路由页面。

Routers

V6 提供了七种router类型。下面介绍几个常见的：

• BrowserRouter

  在web浏览器中使用的router。使用了浏览器内置的历史堆栈导航history。会将URL的变化发送到服务器，因此，需要服务器配置路由接口参数。

• HashRouter

  使用#后面的散列值来标识，不会把URL的变化发送给服务器，因此不需要服务器配置。

• MemoryRouter

  在数组中存储location，不依赖history堆栈。十分适合测试时使用。

  <MemoryRouter initialEntries={["/users/mjackson"]}>
        <Routes>
          <Route path="users" element={<Users />}>
            <Route path=":id" element={<UserProfile />} />
          </Route>
        </Routes>
      </MemoryRouter>

• NativeRouter

  React Native应用中运行React Router的推荐接口。

• StaticRouter

  在节点中渲染React Router web应用。通过location道具提供当前位置。

  function requestHandler(req, res) {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      {/* The rest of your app goes here */}
    </StaticRouter>
  );
  res.write(html);
  res.end();
  }
  http.createServer(requestHandler).listen(3000);

components

• Link

  Link是一个元素，它允许用户通过单击或点击页面导航到另一个页面。有点类似<a href>。

  <Link to={user.id}>{user.name}</Link>

• NavLink

  和Link类似，也是单击跳转页面。但是它可以知道自己是否激活，从而可以生成特定的样式。

  <NavLink
    to="messages"
    style={({ isActive }) =>
    isActive ? activeStyle : undefined
    }
  >
    Messages
  </NavLink>

• Navigate

  导航功能，也是实现页面跳转。但是和Link它们的不同在于，不需要点击，只要有Navigate标签的地方就直接跳转到对应的路由页面。是useNavigate的JSX.Element写法。一般用做路由重定向。

  <Navigate to="/dashboard" replace={true} />

  还可以配置replace选项为true，表示使用history.replace替换栈顶URL，而不是默认的push。

  :ice_cream:注意： 在匹配非法路由，重新跳转404页面中，使用replace非常有用，不然会导致一旦从一个非法路径进入404页面，则永远也出不去了。因此，点击导航的返回按钮，回退的还是非法路径，导致又重定向到404，一直循环。

• Outlet

  嵌套路由中使用。在父路由元素中使用<Outlet>来渲染子路由元素。这允许在渲染子路由时显示嵌套UI。如果父路由完全匹配，它会渲染一个子索引路由，如果没有索引路由则不渲染。

  function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
  
      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
  }
  
  function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
  }

• Route

  路由匹配后，会把对应的组件渲染在Route的位置上。有path，element两个props值。

• Routes

  每当位置发生变化时，<Routes>会遍历它的所有子元素<Route>以找到最佳匹配，并呈现该UI分支。有点像V5中的Switch。但是V5 Route可以独立存在，不包裹在Switch，而V6不可以，Route必须包裹在Routes中。

hooks

下面介绍几个常用的hooks。都是在函数组件中使用。

• useLocation

  let location = useLocation()

  返回当前的location对象。

  location对象包含：

  {
    hash: '#/abc', //返回一个URL的锚部分,#号后面的部分
    key: , 
    pathname: '/home',
    search: '?id=1&name=6',//返回一个URL的查询部分，?号后面的部分
    state: //navigate传递的数据
  }

• useNavigate

  useNavigate钩子返回一个函数，该函数以编程方式导航，例如在提交表单之后。如果使用replace: true，导航将替换历史堆栈中的当前条目，而不是添加一个新条目。

  import { useNavigate } from "react-router-dom";
  
  function SignupForm() {
  let navigate = useNavigate();
  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true,state:{a:111,b:222} });
  }
  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
  }

  • navigate函数有两种模式

  下面是react-router-dom源代码中useNavigate的返回函数类型。也就是navigate是可以是下面两种类型

  export interface NavigateFunction {
      (to: To, options?: NavigateOptions): void;
      (delta: number): void;
  }
  export interface NavigateOptions {
      replace?: boolean;
      state?: any;
  }

  • to 表示跳转URL，options是可选的对象，对象包含replace属性和state属性，replace表示是否使用替换历史堆栈，state表示想要在路由跳转的时候携带的数据。在跳转的页面中，可以使用useLocation，里面就有一个state字段，可以查询到携带的数据。
  • 第二种类型是数字，表示前进后退多少步。

• useOutletContext

  父路由管理状态或其他想要与子路由共享的值。通过创建自己的上下文提供程序，在子路由获取上下文。

  function Parent() {
  const [count, setCount] = React.useState(0);
  return <Outlet context={[count, setCount]} />;
  }
  
  //子文件
  import { useOutletContext } from "react-router-dom";
  function Child() {
  const [count, setCount] = useOutletContext();
  const increment = () => setCount((c) => c + 1);
  return <button onClick={increment}>{count}</button>;
  }

• useParams

  路由动态参数的键/值对对象。子路由从父路由继承所有参数。

  import * as React from 'react';
  import { Routes, Route, useParams } from 'react-router-dom';
  
  function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
  }
  
  function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
  }

• useRoutes

  useRoutes钩子在功能上相当于<Routes>，但它使用JavaScript对象而不是<Route>元素来定义路由。个人非常喜欢的一个钩子函数，可以使用对象的形式配置嵌套路由，不需要使用JSX标签。

  export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;

  可以看到返回的是一个Element标签。

  import { useRoutes } from "react-router-dom";
  
  function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);
  
  return element;
  }
  
  export default function Index() {
    return <BrowserRouter>{APP}</BrowserRouter>
  }

• useSearchParams

  获取查询参数，返回[searchParams, setSearchParams]，

  let [searchParams, setSearchParams] = useSearchParams();
  setSearchParams([
    ["name", "1"],
    ["value", "2"],]))
  console.log(searchParams.get("name"))

官网地址：react-router-dom v6