Flutter web nested routing

I have a flutter app as shown below with routes "LoginScreen, MainScreen, RegisterScreen"

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: '........',
     theme: ThemeData(
       primaryColor: Color(0xff810000),
     ),
     navigatorKey: mainNav,
     home: WelcomeScreen(),
     initialRoute: '/',
     routes: {
       LoginScreen.routeName: (context) => LoginScreen(),
       MainScreen.routeName: (context) => MainScreen(),  
       RegisterScreen.routename: (context) => RegisterScreen()




     },
     
   ),
 );
}
}

Then in my MainScreen i have a column of widgets with one them being a Navigator widget to create a nested navigation in the MainScreen

child: Column(
                children: <Widget>[
                  Header(),
                  SizedBox(
                    height: 50,
                  ),
                  Expanded(
                    child: Navigator(
                      key: mainScreenNav,
                      initialRoute: 'u/main',
                      onGenerateRoute: (RouteSettings settings) {
                        WidgetBuilder builder;
                        switch (settings.name) {
                          case 'u/nestedA':
                            {
                              builder = (BuildContext context) =>
                                  ScreenA();

                              break;
                            }
                          case 'u/nestedB':
                            {
                              
                              builder =
                                  (BuildContext context) => ScreenB();
                              break;
                            }
                          case 'u/nestedC':
                            {
                              builder = (BuildContext context) =>
                                  ScreenC();
                              break;
                            }
                          default:
                            {
                              builder =
                                  (BuildContext context) => UnknownScreen();
                            }
                        }

                        return MaterialPageRoute(
                          settings: settings,
                          builder: builder,
                        );
                      },
                    ),
                  )
                ],
              )

From my side bar i navigate to a different screen like this mainScreenNav.currentState!.pushReplacementNamed('u/nestedA'); and my MainScreen nested navigator is updated accordingly. My Question is how can i update the url bar of my browser with the nested navigator's route name, i.e 'u/nestedA' just as it is update when i navigate to LoginScreen or RegisterScreen.