Code Monkey home page Code Monkey logo

Comments (3)

Wykks avatar Wykks commented on July 22, 2024 1

As a sidenote; the doc (https://reactrouter.com/en/main/routers/create-browser-router#optsunstable_patchroutesonmiss) should not recommend to do something like this:

let router = createBrowserRouter(
  [
    {
      path: "/",
      Component: Home,
    },
    {
      id: "dashboard",
      path: "/dashboard",
    },
    {
      id: "account",
      path: "/account",
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path.startsWith("/dashboard")) {
        let children = await import("./dashboard");
        patch("dashboard", children);
      }
      if (path.startsWith("/account")) {
        let children = await import("./account");
        patch("account", children);
      }
    },
  }
);

Because this way, the exact leaf route "/dashboard" will always show a blank page, even with a "*" route

from react-router.

brophdawg11 avatar brophdawg11 commented on July 22, 2024

Yeah I think this is just a setup issue based on the current API design. There is no way to force the function to be called - it is only called when the router otherwise can't match a path - i.e., a "miss" (barring splat route behavior).

By providing the parent route /test in the critical routes, you're allowing the router to match /test and it never needs to call patchRoutesOnMiss when navigating to /test because it didn't "miss".

The two options to fix this would be:

  1. Remove the /test definition from the critical routes, thus causing a "miss" on /test and giving you a chance to patch it all in:
let router = createBrowserRouter(
  [
    {
      path: '/',
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      // Patch the full `/test` tree in here as a new top-level route
      if (path.startsWith('/test')) {
        patch(null, [
          {
            id: 'test',
            path: '/test',
            children: [
              {
                index: true,
                element: <div>Test</div>,
              },
              {
                path: 'another',
                element: <div>Another</div>,
              },
            ],
          },
        ]);
      }
    },
  }
);
  1. Or, you could include the test index route in the critical routes so it has everything it needs to match /test and then only patch in /another when needed:
let router = createBrowserRouter(
  [
    {
      path: '/',
      Component: RootComponent,
    },
    {
      id: 'test',
      path: '/test',
      children: [{
        index: true,
        element: <div>Test</div>,
      }],
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      // Patch the full `/test` tree in here as a new top-level route
      if (path.startsWith('/test/another')) {
        patch('test', [{
          path: 'another',
          element: <div>Another</div>,
        }]);
      }  
    },
  }
);

from react-router.

Wykks avatar Wykks commented on July 22, 2024

I see, thanks 👍

from react-router.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.