如何在React Router中设置默认路由参数值?

huangapple go评论67阅读模式
英文:

How to set default route parameter value in react router?

问题

Sure, here is the translated code snippet:

export const router = createBrowserRouter([
  {
    path: '/admin',
    element: <App/>,
    errorElement: <PageError/>,
    children: [
      {
        index: true,
        path: 'schedule/:date?',
        element: <React.Suspense fallback={<Loading />}>
          <PageCalendar />
        </React.Suspense>,
      },

And the desired behavior you mentioned:

基本上,我希望如果用户尝试打开 "/admin" 或 "/admin/schedule" 页面,则打开 "/admin/schedule/2023-05-11"(当前日期)页面。

英文:

I want to prevent additional redirect. Is there a way to set default parameter value in router config?

export const router = createBrowserRouter([
  {
    path: &#39;/admin&#39;,
    element: &lt;App/&gt;,
    errorElement: &lt;PageError/&gt;,
    children: [
      {
        index: true,
        path: &#39;schedule/:date?&#39;,
        element: &lt;React.Suspense fallback={&lt;Loading /&gt;}&gt;
          &lt;PageCalendar /&gt;
        &lt;/React.Suspense&gt;,
      },

Basically I want &quot;/admin/schedule/2023-05-11&quot; (current date) page to open if user tries to open &quot;/admin&quot; or &quot;/admin/schedule&quot; page.

答案1

得分: 1

我不相信没有重定向到某个地方就能完成这个任务,以使UI与浏览器中的正确URL路径同步。

你可以包含一个“catch-all”路由,将当前日期注入并重定向到默认路由。

示例:

import { Navigate, generatePath } from 'react-router-dom';

const ScheduleRedirect = () => {
  const date = /* 计算格式化日期,例如"2023-05-11" */
  return (
    <Navigate
      to={generatePath("/admin/schedule/:date", { date })}
      replace
    />
  );
};
export const router = createBrowserRouter([
  {
    path: '/admin',
    element: <App/>,
    errorElement: <PageError/>,
    children: [
      {
        path: 'schedule/:date',
        element: (
          <React.Suspense fallback={<Loading />}>
            <PageCalendar />
          </React.Suspense>
        ),
      },
    ],
  },
  {
    path: "*",
    element: <ScheduleRedirect />,
  },
]);
英文:

I don't believe there's a way to accomplish this without a redirect somewhere to get the UI synchronized with the correct URL path in the browser.

You can include a "catch-all" route that injects the current date and redirects to the default route.

Example:

import { Navigate, generatePath } from &#39;react-router-dom&#39;;

const ScheduleRedirect = () =&gt; {
  const date = /* compute formatted date, e.g. &quot;2023-05-11&quot; */
  return (
    &lt;Navigate
      to={generatePath(&quot;/admin/schedule/:date&quot;, { date })}
      replace
    /&gt;
  );
};
export const router = createBrowserRouter([
  {
    path: &#39;/admin&#39;,
    element: &lt;App/&gt;,
    errorElement: &lt;PageError/&gt;,
    children: [
      {
        path: &#39;schedule/:date&#39;,
        element: (
          &lt;React.Suspense fallback={&lt;Loading /&gt;}&gt;
            &lt;PageCalendar /&gt;
          &lt;/React.Suspense&gt;
        ),
      },
    ],
  },
  {
    path: &quot;*&quot;,
    element: &lt;ScheduleRedirect /&gt;,
  },
]);

huangapple
  • 本文由 发表于 2023年5月11日 07:18:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76223167.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定