routing in Class of Flet

Question

I am customizing the ToDo project that is on the Flet framework website. In a part of the code, I want to be routed to another page when the user clicks on the login button. I checked the routing example codes on the Flet website, but I could not use it in my project (probably because I have poor class writing). So far, I managed to write the program in such a way that when the user clicks on the login button, ":|" be printed Can anyone help me with this? code:

import flet as ft

class TodoApp(UserControl):
    def build(self):
        # application's root control (i.e. "view") containing all other controls
        return Column(
            # width=1000,
            controls=[
                Row(
                    [
                        ElevatedButton(text="Login/SignUp",
                                       tooltip="login", color='green', on_click=self.route_change),
                        Text(
                            value="ToDo", style=TextThemeStyle.HEADLINE_MEDIUM, color='green')
                    ],
                    alignment=MainAxisAlignment.SPACE_BETWEEN,
                ),
            ],
        )

    async def route_change(self, e):
        print(':|')
async def main(page: Page):
    page.title = "ToDo App"
    page.horizontal_alignment = CrossAxisAlignment.CENTER
    page.scroll = ScrollMode.ADAPTIVE
    # create app control and add it to the page
    await page.add_async(TodoApp())


ft.app(main, view=AppView.WEB_BROWSER)

I tried to put the routing codes in the corresponding function (when it is clicked) but it was not successful also i tried flet-route but i cant work with it!