React Router API

核心 Router 组件

<RouterProvider />

挂载整个路由系统（路由入口），需配合 createBrowserRouter / createHashRouter 使用。

const router = createBrowserRouter(routes)

<RouterProvider router={router} />

不再推荐 <BrowserRouter> + <Routes> 作为主流方案

createBrowserRouter

创建基于 History API 的路由：

createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [...]
  }
])

<Outlet />

子路由占位符：

function Layout() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  )
}

<Link />

基础导航。

<Link to="/about">About</Link>

<NavLink />

带 active 状态的导航。

<NavLink to="/home" className={({ isActive }) => (isActive ? 'active' : '')} />

<Navigate />

声明式跳转（重定向）。

<Navigate to="/login" replace />

核心 Router Hooks

useLoaderData()

读取当前路由的 loader 返回值。

const data = useLoaderData()

useRouteLoaderData(routeId)

读取 指定路由 的 loader 数据。

useRouteLoaderData('root')

useMatches()

获取当前匹配到的所有路由信息。

const matches = useMatches()

useNavigate()

命令式跳转。

const navigate = useNavigate()
navigate('/login')

useNavigation()

获取全局导航状态（loading / submitting）。

const navigation = useNavigation()
navigation.state // idle | loading | submitting

useRevalidator()

手动触发 loader 重新执行。

const revalidator = useRevalidator()
revalidator.revalidate()

useParams()

获取路径参数。

const { id } = useParams()

useSearchParams()

操作 URL 查询参数。

const [params, setParams] = useSearchParams()

useLocation()

获取当前 location 对象。

const location = useLocation()

useOutletContext<T>()

获取父级 Outlet 传递的数据。

useOutletContext<MyContext>()

useRouteError()

读取 loader / action 抛出的错误。

const error = useRouteError()

isRouteErrorResponse()

判断是否是路由错误响应。

if (isRouteErrorResponse(error)) {
  error.status
}