This route or it's ancestors must have a path-param with the name id

[SSebigo]

So I have this error:

This route or it's ancestors must have a path-param with the name id
package:wine/presentation/typewriter/typewriter_page.dart:20:27
   ╷
20 │     @PathParam('id') this.uid,
   │                           ^^^
   ╵

in this piece of code when trying to generate the router:

class TypewriterPage extends StatelessWidget {
  /// @nodoc
  const TypewriterPage({
    super.key,
    @PathParam('id') this.uid,
    ...
  });

  /// Tree or Branch id.
  final String? uid;

  ...
}

The router goes as follows:

part 'router.gr.dart';

@AdaptiveAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute<BranchPage>(
      page: BranchPage,
      path: '/branch/:id',
    ),
    ...
    AutoRoute<TreePage>(
      page: TreePage,
      path: '/tree/:id',
    ),
    ...
    AutoRoute<TypewriterPage>(
      name: 'TypewriterBranchUID',
      page: TypewriterPage,
      path: '/typewriter/branch/:id',
    ),
    AutoRoute<TypewriterPage>(
      name: 'TypewriterBranchNew',
      page: TypewriterPage,
      path: '/typewriter/branch/new',
    ),
    AutoRoute<TypewriterPage>(
      name: 'TypewriterTreeUID',
      page: TypewriterPage,
      path: '/typewriter/tree/:id',
    ),
    AutoRoute<TypewriterPage>(
      name: 'TypewriterTreeNew',
      page: TypewriterPage,
      path: '/typewriter/tree/new',
    ),
  ],
)

/// @nodoc
class AppRouter extends _$AppRouter {}

I've removed the routes without @ParamPath('id) this.uid from the code sample.

I don't really understand where the problem is, it worked well until I updated to v5.0.1 (from v4.0.1).

[Raviteja11122]

@SSebigo problem with this definition

AutoRoute<TypewriterPage>( name: 'TypewriterBranchNew', page: TypewriterPage, path: '/typewriter/branch/new', ),

"TypewriterPage" has path param "id" but your definition doesn't

[SSebigo]

@Raviteja11122 but the argument is nullable, shouldn't the generator ignore it in cases where the ID is not needed ? That's why I create different paths, one where the ID is given and one where it's not.

[Raviteja11122]

@SSebigo have you tried query params? maybe it helps.

[Milad-Akarie]

Hello @Raviteja11122 Because nullable/optional path params are not considered a good practice auto_route stopped supporting them a long time ago.
You can use queryParams are @SSebigo suggested or you can simply change the order if the two routes

    AutoRoute<TypewriterPage>(
      name: 'TypewriterBranchNew',
      page: TypewriterPage,
      path: '/typewriter/branch/new',
    ),
   AutoRoute<TypewriterPage>(
      name: 'TypewriterBranchUID',
      page: TypewriterPage,
      path: '/typewriter/branch/:id',
    ),

this way the matcher will match this path first /typewriter/branch/new if you pass anything else other than 'new' the second route will be matched.

What I usually do is this

   RedirectRoute(path: '/typewriter/branch', to: 'typewriter/branch/new'),
   AutoRoute<TypewriterPage>(
      name: 'TypewriterBranchUID',
      page: TypewriterPage,
      path: '/typewriter/branch/:id',
    ),

so when users type '/typewriter/branch' in the browser you can get directed the right route

[Raviteja11122]

Thanks for the reply @Milad-Akarie. I think @SSebigo got the solution.

[jrolinskifdt]

@Milad-Akarie Hey, i am not sure if i understand your solution correctly. My implementation of simple page for manage event:

class ManageEventPage extends StatefulWidget {
  const ManageEventPage(
    @PathParam('uuid') this.uuid, {
    Key? key,
  }) : super(key: key);

  final String? uuid;

  @override
  State<ManageEventPage> createState() => _ManageEventPageState();
}

and part in CustomAutoRouter responsible for its route:

@CustomAutoRouter(
  replaceInRouteName: 'Page,Route',
  transitionsBuilder: TransitionsBuilders.noTransition,
  routes: <AutoRoute>[
      AutoRoute(
      page: ManageEventPage,
      path: '/events/event/add',
      name: 'AddEventRoute',
    ),
    AutoRoute(
      page: ManageEventPage,
      path: '/events/event/:uuid',
      name: 'EditEventRoute',
    ),
      ],
)

As a result when i try to generate code i get This route or it's ancestors must have a path-param with the name uuid. The problem is that it is pretty common to have one page responsible for editing and creating events and other. For now the only solution that i can see is to create extra class above the ManageEventPage with or without uuid params which not sound right for me. Is there any other solution for this?

[tstarasinic]

@jrolinskifdt Did you find a solution for that ? I have the same problem and can't find the solution for it.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions