flat-fuchsia

Router doesn't seem to prioritize more specific paths

When I have "/accounts" and "/accounts/new" the router renders the /accounts component for both paths. Do I need to set things up a certain way to prioritize the more specific path?

13 Replies

fascinating-indigo•3y ago

@SethThoburn Are you creating the /accounts/new as a child of /accounts?

flat-fuchsiaOP•3y ago

I'm not, they are separate routes both registered on the root route

export const accountRoute = rootRoute.createRoute({
  path: "/accounts",
  component: Account,
  loader: getAccounts,
});

export const newAccountRoute = rootRoute.createRoute({
  path: "/accounts/new",
  component: NewAccount,
});

export const accountRoute = rootRoute.createRoute({
  path: "/accounts",
  component: Account,
  loader: getAccounts,
});

export const newAccountRoute = rootRoute.createRoute({
  path: "/accounts/new",
  component: NewAccount,
});

fascinating-indigo•3y ago

Hmmm.... I have /root/team and /root/team/select under the actual root (i.e. __root__); additionally I have children of /root/team. When I visit /root/team/select it does not match /root/team.

flat-fuchsiaOP•3y ago

I just switched their order in the router and that fixed it! Seems like a bug but at least I have a workaround Seems that the most specific one must go first

rising-crimson•3y ago

React Router has this solved by using a ranking system. https://reactrouter.com/en/main/start/overview#ranked-route-matching Here's the implementation: https://github.com/remix-run/react-router/blob/112ff0555d41acd99d15cd1f289d1c672dfba3d1/packages/router/utils.ts#L502

rare-sapphire•3y ago

Yeah, we could add this to the core. It's pretty standard now At the same time, it's not a stretch to just order your own routes. I could go either way.

adverse-sapphire•3y ago

I also noticed this issue and reported it on GitHub: https://github.com/TanStack/router/issues/484

GitHub

defaultComponent is never rendered if exact match is not found · Is...

Describe the bug I have defined defaultComponent that should be rendered when exact route match is not found: const router = createReactRouter({ routeConfig, defaultComponent: NotFound, }); Now if ...

rare-sapphire•3y ago

Working on this now Might need better docs. Since it’s not really a 404. It’s literally a default fallback for routes that don’t have a component defined. Routes now auto rank And the basic example has a not-found example now

adverse-sapphire•3y ago

Very glad to hear that. Hopefully a new version is released soon. 🙂

rare-sapphire•3y ago

Just pushed a new version Catch-all routes now work properly for "not-found" circumstances

rare-sapphire•3y ago

I'm struggling to get these routes to work, is it a bug or I'm doing something wrong? @Tanner Linsley

rare-sapphire•3y ago

if I unregister the dashboard route from the rootRoute it loads the right component but that leaves me without the dashboard route I found my error, I just saw how it's done in the kitchen sink example

Gaming

Programming

Router doesn't seem to prioritize more specific paths

Did you find this page helpful?