React-Router

请注意，为了使basename属性生效，需要将其放在Router组件的标签内。

//路由到达前
createBrowserRouter(routes, {
  basename: "/app",
});
<Link to="/" />; // results in <a href="/app" />

//路由到达后
createBrowserRouter(routes, {
  basename: "/app/",
});
<Link to="/" />; // results in <a href="/app/" />

一组可选的未来标志来启用这个路由器。我们建议尽早选择新发布的未来标志，以便最终迁移到v7：

const router = createBrowserRouter(routes, {
  future: {
    // Normalize `useNavigation()`/`useFetcher()` `formMethod` to uppercase
    v7_normalizeFormMethod: true,
  },
});

以下是当前可用的未来标志:

当服务器渲染和选择退出自动水合作用时，hydrationData选项允许您从服务器渲染传入水合作用数据。这几乎总是你从handler.query返回的StaticHandlerContext值的数据子集:

const router = createBrowserRouter(routes, {
  hydrationData: {
    loaderData: {
      // [routeId]: serverLoaderData
    },
    // may also include `errors` and/or `actionData`
  },
});

你几乎总是会包含一套完整的loaderData来为服务器渲染的应用程序提供支持。但在高级用例中(比如Remix的clientLoader)，你可能只想为服务器上渲染的一些路由包含loaderData。如果你想启用部分loaderData和选择进入颗粒路由。使用hydratfallback时，需要将来启用。v7_partialHydration国旗。在此标志之前，任何提供的loaderData都被认为是完整的，不会导致在初始化时执行路由加载器。

当指定此标志时，加载器将在两种情况下运行初始水合:

没有提供水合作用数据

在这些情况下，HydrateFallback组件将在初始水化时渲染

加载程序。水合物属性设置为true

这允许您运行加载程序，即使您没有在初始化时呈现回退(即，初始化数据缓存)。

const router = createBrowserRouter(
  [
    {
      id: "root",
      loader: rootLoader,
      Component: Root,
      children: [
        {
          id: "index",
          loader: indexLoader,
          HydrateFallback: IndexSkeleton,
          Component: Index,
        },
      ],
    },
  ],
  {
    future: {
      v7_partialHydration: true,
    },
    hydrationData: {
      loaderData: {
        root: "ROOT DATA",
        // No index data provided
      },
    },
  }
);

对于浏览器开发工具插件等环境或测试使用与全局窗口不同的窗口非常有用。

createHashRouter

如果你不能配置你的web服务器来引导所有的流量到你的React router应用程序，这个路由器是有用的。它将使用URL的哈希(#)部分来管理“应用程序URL”，而不是使用正常的URL。不建议使用散列url。

除此之外，它在功能上与createBrowserRouter相同。

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createHashRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createHashRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

createMemoryRouter

内存路由器不使用浏览器的历史记录，而是在内存中管理自己的历史记录堆栈。它主要用于测试和组件开发工具，如Storybook，但也可用于在任何非浏览器环境中运行React Router。

createStaticRouter

当你想利用数据路由器在服务器(即Node或其他Javascript运行时)上进行渲染时，使用createStaticRouter。有关更完整的概述，请参阅服务器端呈现指南。

createStaticHandler

在服务器端通过呈现应用程序之前，createStaticHandler用于在服务器(即Node或其他Javascript运行时)上执行数据获取和提交。有关更完整的概述，请参阅服务器端呈现指南。

RouterProvider

declare function RouterProvider(
  props: RouterProviderProps
): React.ReactElement;
//该标签只有三个属性：router、fallbackElement、future
interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: Router;
  future?: Partial<FutureConfig>;
}

StaticRouterProvider

一个从createStaticRouter()中接受一个路由器，从createStaticHandler()中接受一个上下文，并在服务器(即Node或其他Javascript运行时)上呈现你的应用程序。有关更完整的概述，请参阅服务器端呈现指南。

import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router-dom/server";
import Root, {
  loader as rootLoader,
  ErrorBoundary as RootBoundary,
} from "./root";

const routes = [
  {
    path: "/",
    loader: rootLoader,
    Component: Root,
    ErrorBoundary: RootBoundary,
  },
];

export async function renderHtml(req) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let fetchRequest = createFetchRequest(req);
  let context = await query(fetchRequest);

  // If we got a redirect response, short circuit and let our Express server
  // handle that directly
  if (context instanceof Response) {
    throw context;
  }

  let router = createStaticRouter(dataRoutes, context);
  return ReactDOMServer.renderToString(
    <React.StrictMode>
    <StaticRouterProvider
  router={router}
  context={context}
    />
    </React.StrictMode>
  );
}

路由组件

其实就是上面各种路由器的组件版本。

路由属性

Route路由中大多属性讲解

路由可能是React Router应用中最重要的部分。它们将URL段与组件、数据加载和数据突变耦合在一起。通过路由嵌套，复杂的应用程序布局和数据依赖关系变得简单明了。

路由是传递给路由器创建函数的对象:

const router = createBrowserRouter([
  {
    // it renders this element
    element: <Team />,

    // when the URL matches this segment
    path: "teams/:teamId",

  // with this data loaded before rendering
  loader: async ({ request, params }) => {
  return fetch(
    `/fake/api/teams/${params.teamId}.json`,
    { signal: request.signal }
  );
},

  // performing this mutation when data is submitted to it
  action: async ({ request }) => {
  return updateFakeTeam(await request.formData());
    },

    // and renders this element in case something went wrong
    errorElement: <ErrorBoundary />,
  },
]);

你也可以用JSX和createRoutesFromElements来声明你的路由，元素的props和路由对象的属性是一样的:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
  element={<Team />}
  path="teams/:teamId"
  loader={async ({ params }) => {
  return fetch(
    `/fake/api/teams/${params.teamId}.json`
  );
}}
action={async ({ request }) => {
  return updateFakeTeam(await request.formData());
}}
errorElement={<ErrorBoundary />}
  />
  )
);

这两种风格都是不鼓励的，行为是相同的。在本文档的大部分内容中，我们将使用JSX风格，因为这是大多数人在React Router环境中习惯使用的风格。

注意：

当使用RouterProvider时，如果你不想指定一个React元素(即element={})，你可以指定一个Component(即Component={MyComponent})， React Router会在内部为你调用createElement。你应该只对RouterProvider应用这么做，因为在中使用Component会破坏React在渲染中重用已创建元素的能力。

路由所有属性

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

path属性

如果一个路径段以:开头，那么它就变成了一个“路径参数”。当路由匹配URL时，路径参数将从URL中解析出来，并作为参数提供给其他路由器api。

<Route
	path="/teams/:teamId"
	loader={({ params }) => {
  	console.log(params.teamId); 
	}}
	action={({ params }) => {}}
	element={<Team />}
/>;

  //获取路径参数
  function Team() {
    let params = useParams();
  	console.log(params.teamId);
	}

可选参数：

<Route
//表示该路径参数是可选的，不是必填的
path="/:lang?/categories"
loader={({ params }) => {
console.log(params["lang"]); 
  }}
  action={({ params }) => {}}
  element={<Categories />}
/>;

// 
function Categories() {
  let params = useParams();
  console.log(params.lang);
}

<Route path="/project/task?/:taskId" />

*号：

<Route
	path="/files/*" //路径里面加个*，表示匹配该路径后面所有的路由
	loader={({ params }) => {
  	console.log(params["*"]); 
	}}
	action={({ params }) => {}}
	element={<Team />}
/>;
 
  function Team() {
    let params = useParams();
    console.log(params["*"]);
  }

你可以解构*，你只需要给它赋一个新名字。一个常见的名字是splat:

let { org, "*": splat } = params;

布局路由

//省略path参数的路由作为布局路由，它参与UI嵌套，但不向URL添加任何路径。
<Route
	element={
  	<div>
  		<h1>Layout</h1>
  		<Outlet />
  	</div>
	}
>
  <Route path="/" element={<h2>Home</h2>} />
  <Route path="/about" element={<h2>About</h2>} />
</Route>

index属性

确定路由是否为索引路由。索引路由在父路由的URL上呈现到父路由的Outlet中(就像默认的子路由一样)。

<Route path="/teams" element={<Teams />}>
  <Route index element={<TeamsIndex />} />
  <Route path=":teamId" element={<Team />} />
  </Route>

caseSensitive（大小写）

指示路由是否匹配case:

<Route caseSensitive path="/wEll-aCtuA11y" />

在React Router中，caseSensitive属性用于指定匹配路由时是否区分大小写。默认情况下，caseSensitive属性的值为false，表示不区分大小写。

当caseSensitive属性的值为true时，路由匹配将区分大小写。这意味着在URL中，路径的每个字母都将被视为区分大小写，只有完全匹配的路径才会被视为有效路由。

loader

路由加载器在路由呈现之前被调用，并通过useLoaderData为元素提供数据。

<Route
path="/teams/:teamId"
loader={({ params }) => {
  return fetchTeam(params.teamId);
}}
/>;

function Team() {
  let team = useLoaderData();
  // ...
}

如果您没有使用像createBrowserRouter这样的数据路由器，那么这将不起任何作用。

action

当表单、获取器或提交向路由发送提交时，调用路由的action。

<Route
path="/teams/:teamId"
action={({ request }) => {
  const formData = await request.formData();
  return updateTeam(formData);
}}
/>

如果您没有使用像createBrowserRouter这样的数据路由器，那么这将不起任何作用。

element和Component

这两个都可以生成组件，但是推荐用element。因为component会破坏React跨渲染重用已创建元素的能力。

errorElement / ErrorBoundary

当路由在渲染时抛出异常时，无论是在加载器中还是在动作中，这个React元素/组件都会渲染，而不是正常的元素/组件。

如果你想自己创建React元素，使用errorElement:

<Route
	path="/for-sale"
	// if this throws an error while rendering
	element={<Properties />}
  // or this while loading properties
  loader={() => loadProperties()}
  // or this while creating a property
  action={async ({ request }) =>
  	createProperty(await request.formData())
  }
  // then this element will render
  errorElement={<ErrorBoundary />}
/>

否则使用ErrorBoundary（reactRouter帮我们创建错误页面）, React Router会为你创建React元素:

<Route
	path="/for-sale"
	Component={Properties}
	loader={() => loadProperties()}
  action={async ({ request }) =>
    createProperty(await request.formData())
  }
  ErrorBoundary={ErrorBoundary}
/>

如果您没有使用像createBrowserRouter这样的数据路由器，那么这将不起任何作用

hydrateFallbackElement / HydrateFallback

如果你正在使用服务器端渲染，并且你正在利用部分水化，那么你可以指定一个元素/组件在应用程序的初始水化期间为非水化路由渲染。

如果您没有使用像createBrowserRouter这样的数据路由器，那么这将不起任何作用

这只适用于更高级的用例，如Remix的clientLoader功能。大多数SSR应用不需要利用这些路由属性。

请参阅hydrateFallbackElement文档了解更多细节。

lazy

为了让你的应用包更小，并支持对路由进行代码拆分，每个路由都可以提供一个异步函数来解析路由定义中不匹配路由的部分(loader、action、Component/element、ErrorBoundary/errorElement等)。

每个lazy函数通常都会返回动态导入的结果。

let routes = createRoutesFromElements(
  <Route path="/" element={<Layout />}>
  <Route path="a" lazy={() => import("./a")} />
  <Route path="b" lazy={() => import("./b")} />
  </Route>
);

然后在你的lazy路由模块中，导出你想要为路由定义的属性:

export async function loader({ request }) {
  let data = await fetchData(request);
  return json(data);
}

export function Component() {
  let data = useLoaderData();

  return (
    <>
    <h1>You made it!</h1>
    <p>{data}</p>
    </>
  );
}

如果您没有使用像createBrowserRouter这样的数据路由器，那么这将不起任何作用

action

路由action是“写”到路由loader“读”。它们为应用程序提供了一种使用简单的HTML和HTTP语义执行数据突变的方法，而React Router抽象了异步UI和重新验证的复杂性。这为您提供了HTML + HTTP(其中浏览器处理异步和重新验证)与现代spa的行为和用户体验功能的简单心智模型。

此功能仅在使用createBrowserRouter时有效。

<Route
	path="/song/:songId/edit"//这里有动态数据段songId
	element={<EditSong />}
  action={async ({ params, request }) => {
    let formData = await request.formData();
  	return fakeUpdateSong(params.songId, formData);
  }}
	loader={({ params }) => {
  	return fakeGetSong(params.songId);
	}}
/>

当应用向你的路由发送一个非get提交(“post”、“put”、“patch”、“delete”)时，action就会被调用。这可以通过几种方式发生:

// forms
<Form method="post" action="/songs" />;
<fetcher.Form method="put" action="/songs/123/edit" />;

// imperative submissions
let submit = useSubmit();
submit(data, {
  method: "delete",
  action: "/songs/123",
});
fetcher.submit(data, {
  method: "patch",
  action: "/songs/123/edit",
});

参数：

路由参数是从动态segments中解析出来的，然后传递给你的动作。这对于确定要改变的资源非常有用:

<Route
	path="/projects/:projectId/delete"
	action={({ params }) => {
  	return fakeDeleteProject(params.projectId);
	}}
/>

请求：

这是一个发送到路由的Fetch Request实例。最常见的用例是解析来自请求的FormData

<Route
	action={async ({ request }) => {
  	let formData = await request.formData();
 	 // ...
	}}
/>

起初，action接收“请求”可能看起来很奇怪。你写过这行代码吗?

<form
	onSubmit={(event) => {
  	event.preventDefault();
 	 // ...
	}}
/>

你到底在阻止什么?

没有JavaScript，只有普通的HTML和HTTP web服务器，这个被阻止的默认事件实际上是非常棒的。浏览器会将表单中的所有数据序列化为FormData，并将其作为新请求的主体发送给服务器。就像上面的代码一样，React Router

请记住，formData中的值是在表单提交时自动序列化的，因此输入需要一个名称。

<Form method="post">
  <input name="songTitle" />
  <textarea name="lyrics" />
  <button type="submit">Save</button>
</Form>;

// accessed by the same names
formData.get("songTitle");
formData.get("lyrics");

可选序列化类型：

请注意，当使用useSubmit时，您也可以传递encType: "application/json"或encType: "text/plain"来将您的payload序列化为request.json()或request.text()。

返回响应：

虽然你可以从一个动作中返回任何你想要的东西，并从useActionData中访问它，你也可以返回一个web Response。

加入actions：

你可以抛出你的action来打破当前调用栈(停止运行当前代码)，React Router就会沿着“错误路径”重新开始。

<Route
	action={async ({ params, request }) => {
  	const res = await fetch(
    	`/api/properties/${params.id}`,
    	{
      	method: "put",
      	body: await request.formData(),
    	}
  	);
  	if (!res.ok) throw res;
  	return { ok: true };
  }}
/>

每条路由处理多个action：

一个相当常见的问题是“如果我需要在我的action中处理多个不同的action该怎么办?”有几种方法可以做到这一点，但通常最简单的是在上放置一个名称/值，并在操作中使用它来决定执行哪个代码(这是正确的-提交按钮可以有名称/值属性!):

async function action({ request }) {
  let formData = await request.formData();
  let intent = formData.get("intent");

  if (intent === "edit") {
    await editSong(formData);
    return { ok: true };
  }

  if (intent === "add") {
    await addSong(formData);
    return { ok: true };
  }

  throw json(
    { message: "Invalid intent" },
    { status: 400 }
  );
}

function Component() {
  let song = useLoaderData();

  // When the song exists, show an edit form
  if (song) {
    return (
      <Form method="post">
      <p>Edit song lyrics:</p>
    {/* Edit song inputs */}
    <button type="submit" name="intent" value="edit">
      Edit
      </button>
      </Form>
    );
  }

  // Otherwise show a form to add a new song
  return (
    <Form method="post">
    <p>Add new lyrics:</p>
  {/* Add song inputs */}
  <button type="submit" name="intent" value="add">
    Add
    </button>
    </Form>
  );
}

如果按钮名称/值不适合您的用例，您还可以使用隐藏输入来发送和意图，或者您可以通过 prop提交不同的HTTP方法(POST用于添加，PUT/PATCH用于编辑，DELETE用于删除)。

errorElement

hydrateFallbackElement

lazy（路由懒加载）

只有这种写法才能通过ts检查。

而且下面这种写法无法加载出组件，所以我们用上面这种写法来进行懒加载。

loader

数据的接收需要通过useLoaderData， 使用很简单直接导入调用就行。

const data: any = useLoaderData();

shouldRevalidate

组件

常用钩子

useRoutes()配置路由表

根据路由表，动态创建 和

import { useRoutes } from 'react-router-dom'

// 定义路由表
const elements = useRoutes([{
    path: '/about',
    element: <About />
}, {
    path: '/home',
    element: <Home />
}, {
    path: '/',
    element: <Navigate to='/about' />
}])

// 在配置路由管理的地方直接插入即可
{elements}

// 子路由直接使用<Outlet/> 标签占位即可
<Outlet/>

useNavigate()编程式导航

返回一个函数用来实现编程式路由导航

useHistory（）钩子在v6版本废弃了。用useNavigate（）钩子代替。

import { useNavigate } from 'react-router-dom'

navigat('detail', {
    replace: false,
    state: message
})

useParams()获取路径参数

接收当前路由的 params 参数，对标 5 路由组件的 match.params

import { useParams } from 'react-router-dom'

const { x, xx, xxx } = useParams()

// 也可以用 useMatch 但是正常人不会用的，因为它需要传入全路径：
// useMatch('/home/message/detail/:id/:title/:info')

useSearchParams()获取查询参数

用于读取和修改当前路由 URL 中的查询字符串（就是search参数）

返回一个包含两个值的数组：当前search集合，更新search集合的函数

import { useSearchParams } from 'react-router-dom'

// 获取search参数
const [search, setSearch] = useSearchParams()
const x = search.get('x')
const xx = search.get('xx')
const xxx = search.get('xxx')

// 修改search参数
setSearch('x=5000&xx=新标题&xxx=小猪佩奇')

useLocation()获取路由路径

获取当前路由 loacation 值，对标 5 路由组件的 location 属性

import { useLocation } from 'react-router-dom'

// 直接连续结构获取 location 中的 state 的属性
const { state: { id, title, info } } = useLocation()

在React Router库中，useLocation是一个重要的钩子函数，用于在函数式组件中获取当前页面的URL地址信息。它返回一个包含当前路径、搜索参数和哈希值等信息的location对象。

useLocation的作用是帮助开发者获取当前页面的URL位置区域信息，包括pathname、search和hash等部分。通过useLocation，开发者可以在功能组件中轻松地获取和响应当前URL位置区域的变化。

useLocation的基本用法是在功能组件中引入useLocation钩子函数，它将返回一个location对象，可以通过该对象访问当前页面的URL信息。例如，可以使用location.pathname获取当前页面的路径，使用location.search获取查询参数等。

此外，在React Router中，还有一个重要的钩子函数是useHistory，它返回一个包含历史记录信息的history对象。通过这个对象，开发者可以执行路由跳转操作，例如使用history.push方法来跳转到新的页面。

总之，useLocation和useHistory是React Router库中非常重要的钩子函数，它们可以帮助开发者在React应用程序中轻松地处理路由和导航。

useMatch()路径严格匹配

返回当前匹配信息，对标 5 路由组件的 match 属性

非特殊情况正常人不会用的，因为它需要传入全路径：

// 路由配置
<Route path='/home/message/detail/:id/:title/:info' element={<Message/>}/>

// Message组件引入 useParams
import { useParams } from 'react-router-dom'
// Message组件获取匹配信息
const match = useMatch('/home/message/detail/:id/:title/:info')

// match 对象输出如下(其他方式传参pathxxx不会有后缀)
{
    params:  {},
	pathname: "/home/message/detail/x/xx/xxx",
	pathnameBase: "/home/message/detail/x/xx/xxx",
	pattern: {
        path: "/home/message/detail/:id/:title/:info"
        caseSensitive: false,
        end: true,
    }
}

useMatch 是 React Router 库中的一个钩子（hook），用于返回当前路径是否与给定的模式匹配。这个钩子函数接受一个模式作为参数，并返回一个布尔值，表示当前路径是否与该模式匹配。

使用 useMatch 可以方便地判断当前路径是否符合特定的条件，从而执行相应的逻辑。例如，你可以使用 useMatch 来判断用户是否在登录状态下，或者判断用户是否在访问特定的页面。

下面是一个简单的示例，演示了如何使用 useMatch 来判断当前路径是否匹配指定的模式：

import { useMatch } from 'react-router-dom';  
  
function ExampleComponent() {  
  const isPathMatched = useMatch('/example'); // 判断当前路径是否匹配 "/example"  
  
  if (isPathMatched) {  
    // 当前路径匹配 "/example"，执行相应的逻辑  
    return <h1>当前路径匹配 "/example"</h1>;  
  } else {  
    // 当前路径不匹配 "/example"，执行其他逻辑  
    return <h1>当前路径不匹配 "/example"</h1>;  
  }  
}

在上面的示例中，useMatch('/example') 将返回一个布尔值，表示当前路径是否匹配 "/example"。根据返回值，我们可以执行相应的逻辑。

请注意，useMatch 是基于正则表达式进行匹配的，因此可以使用正则表达式的元字符来定义匹配模式。例如，useMatch('/users/:id') 将匹配以 "/users/" 开头，后面跟着一个参数的路径。

useInRouterContext()

如果组件在 Router 的上下文中呈现（处在路由组件内），则 useInRouterContext() 钩子返回 true，否则返回 false

useNavigationType()导航类型

返回当前的导航类型（用户是如何来到当前页面的）

返回值：POP、PUSH、REPLACE

备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面或者路由首页）

useOutlet()嵌套路由

用来呈现当前组件中要渲染的嵌套路由

const result = useOutlet()
// 如果嵌套路由没挂载：null
// 如果嵌套路由已挂载：嵌套路由对象

useResolvedPath()

给定一个URL值，解析其中的 path、search、hash 值

获取请求

全局属性

action和loader的执行时机

react-router-dom 是一个用于 React 的路由库，提供了基于浏览器的路由功能。在 react-router-dom 的 useRoutes 钩子中，你可以使用 data 属性来定义路由。

在 data 属性中，你可以定义两个属性：action 和 loader。

1. action：

• • 执行时机：当路由匹配时，会立即执行这个 action。
  • 用途：通常用于异步操作，如 API 请求。并没有说什么时候会执行完成。
  • 返回值：返回值将作为组件的 props 传递给匹配的组件。

2. loader：

• • 执行时机：当路由匹配时，loader 会被调用，但它的结果会在实际渲染组件时被使用。也就是说，loader 的执行会在路由匹配之后，但在实际渲染组件之前。
  • 用途：通常用于异步加载数据，这些数据将作为组件的 props 传递给匹配的组件。
  • 返回值：返回值将作为组件的 props 传递给匹配的组件。

简而言之，action 和 loader 都可以用于执行异步操作，但它们的执行时机和用途略有不同。action 用于执行操作并立即返回结果，而 loader 用于加载数据并在渲染时使用这些数据。

既然返回值是传入props的，那么说明执行的异步函数，作用必须是获取一次性的数据，即不能根据条件改变，所以action和loader这些通常用于获取组件渲染的数据，而不用于获取交互的数据。