absent-sapphire

ts error when using MatchRoute to identify parametrized child route in the parent route component

Example code: https://stackblitz.com/edit/tanstack-router-bu4ifd?file=src%2Fmain.tsx I have a /posts route with a list of posts (PostsComponent). Whenever user clicks on a post item, route changes to /posts/$postId and layout changes to two columns - in the first column we have the simplified list of posts with some additional elements and post details (PostComponent) in the second column. So now within PostsComponent I have to track that either current route is /posts/$postId and I have to use MatchRoute but getting ts error that $postId parameter is required. It looks weird because I don't care about exact post, just want to check the route. fuzzy option didn't help. Actually if ignore the ts error it works correctly.

const PostsComponent = () => {
  return (
    // show clickable list of posts
    // ...
    
    // render additional elements when detailed post view route /posts/$postId opened. Getting ts error that `postId` param is not specified
    <MatchRoute to="/posts/$postId">
      <p>I am rendered when /posts/$postId child route is active</p>
    </MatchRoute>

    <Outlet /> // used to represent detailed post view
  );
}

const PostComponent () => ... // shows single post details

// create a router
const rootRoute = createRootRoute();

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <Navigate to="/posts" />,
});

const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'posts',
  component: PostsComponent,
});

const postRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: PostComponent
});

const routeTree = rootRoute.addChildren([
  indexRoute,
  postsRoute.addChildren([postRoute]),
]);

const PostsComponent = () => {
  return (
    // show clickable list of posts
    // ...
    
    // render additional elements when detailed post view route /posts/$postId opened. Getting ts error that `postId` param is not specified
    <MatchRoute to="/posts/$postId">
      <p>I am rendered when /posts/$postId child route is active</p>
    </MatchRoute>

    <Outlet /> // used to represent detailed post view
  );
}

const PostComponent () => ... // shows single post details

// create a router
const rootRoute = createRootRoute();

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <Navigate to="/posts" />,
});

const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'posts',
  component: PostsComponent,
});

const postRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: PostComponent
});

const routeTree = rootRoute.addChildren([
  indexRoute,
  postsRoute.addChildren([postRoute]),
]);

Alex Kompaniets

StackBlitz

Router Quickstart Example (forked) - StackBlitz

Run official live example code for Router Quickstart, created by Tanstack on StackBlitz

3 Replies

rising-crimson•2y ago

this type error is fixed in v1.14.5

rising-crimson•2y ago

here is your example using this version and the TS error does not occur anymore: https://stackblitz.com/edit/tanstack-router-grjjzy?file=src%2Fmain.tsx

Manuel Schiller

StackBlitz

Router Quickstart Example (forked) - StackBlitz

Run official live example code for Router Quickstart, created by Tanstack on StackBlitz

absent-sapphireOP•2y ago

Thanks, nice catch 👍

Gaming

Programming

ts error when using MatchRoute to identify parametrized child route in the parent route component

Did you find this page helpful?