react-router 6.9更新内容

1. 有两种方式可以定义路由：传递React Elements<Home />或传递React ComponentHome。但是如果它们同时存在，则以React Component优先。
   缺点: 通过React Component方式定义无法传递props，可以考虑使用全局状态管理。

const elementRoutes = [{
  path: '/',
  element: <Home />,
  errorElement: <HomeError />,
}]

const componentRoutes = [{
  path: '/',
  Component: Home,
  ErrorBoundary: HomeError,
}]

function Home() { ... }
function HomeError() { ... }

2. 新增lazy route模块。在路由上新增了lazy() 属性。
   当用lazy={() => import("./a")}导入时会自动识别export的loader 、 action 、 element / Component 、 errorElement / ErrorBoundary 、 shouldRevalidate 、 handle等函数
   进行注入使用。减少了配置Route时属性的重复。
   缺点: 使用lazy()，无法使用react-router的loader和lazy同时加载的功能，还是跟以前一样是瀑布流加载方式。只是提升了开发体验。

// routes配置
let routes = createRoutesFromElements(
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="a" lazy={() => import("./a")} />
    <Route path="b" lazy={() => import("./b")} />
  </Route>
);
// component.tsx文件
// 直接导出一个“loader”
export async function loader({ request }) {
  let data = await fetchData(request);
  return json(data);
}

// 直接导出一个“组件”，而不需要从它创建一个React元素
export function Component() {
  let data = useLoaderData();

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

// 直接导出一个“ErrorBoundary”错误组件，而不需要从它创建一个React元素
export function ErrorBoundary() {
  let error = useRouteError();
  return isRouteErrorResponse(error) ? (
    <h1>
      {error.status} {error.statusText}
    </h1>
  ) : (
    <h1>{error.message || error}</h1>
  );
}