# Router

<div id="introduction"></div>
## Introduction

Routes helps us navigate users around our apps. They provide a simple journey usually from the (`/`) index page. You can add routes in Nylo with the `lib/routers/router.dart` file. In this file, you’ll be able to assign the `name` of the route e.g. `“/settings”` and also the widget view you want to show.

You may also need to pass data from one view to the other and that’s also possible when navigating from a widget. We’ll dive deeper into how all this works in Nylo. 

<div id="adding-routes"></div>

## Adding routes

This is the most basic form of adding a new route to your project in the `/lib/routes/router.dart` file.

``` dart
buildRouter() => nyRoutes((router) {
  ...
  router.route("/settings-page", (context) => SettingsPage());

  // add more routes
  // router.route('/home', (context) => HomePage());

});
```

> Inside the `router.dart` file you'll find the `buildRouter` function, this is called when initializing the app.

<div id="navigating-to-pages"></div>

## Navigating to pages

You can navigate to new pages using the `Navigator` class as per the below example.

``` dart
void _pressedSettings() {
    Navigator.pushNamed(context, "/settings-page");
}
```

You can also navigate using the `routeTo()` helper if your widget extends `NyState`.

``` dart
...
class SettingsPage extends NyStatefulWidget {
  final SettingController controller = SettingController();
  
  SettingsPage({Key key}) : super(key: key);
  
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends NyState<SettingsPage> {

  void _pressedSettings() {
      routeTo("/settings-page");
  }
```

Pass data to the next page.
``` dart
// HomePage Widget
void _pressedSettings() {
    Navigator.pushNamed(context, "/settings-page", arguments: "Hello World");
    // or
    routeTo("/settings-page", data: "Hello World");
}
...
// SettingsPage Widget
class _SettingsPageState extends NyState<SettingsPage> {
  ...
  @override
  widgetDidLoad() async {
    print(widget.data()); // Hello World
  }
```

Once you're on the new page, you can also call `pop()` to go back to the existing Page.
``` dart
// SettingsPage Widget
class _SettingsPageState extends NyState<SettingsPage> {
  ...
  _back() {
    this.pop();
  }
```

<div id="passing-data-to-routes"></div>

## Passing data to routes

You may sometimes need to pass data from one screen to another. Here’s a simple example of how that might look in Nylo.

``` dart
class _HomePageState extends NyState<HomePage> {
  ...
  _showProfile() {
    User user = new User();
    user.firstName = 'Anthony';

    routeTo("/profile-page", data: user);
  }

...
```

Next on our other page

``` dart 
class _ProfilePageState extends NyState<ProfilePage> {
  ...
  @override
  widgetDidLoad() {
    User user = widget.data();
    print(user.firstName); // Anthony

  }
```

Note: For this to work your widget will **need** to extend the `StatefulPageWidget` class and have a controller.

<div id="add-multiple-routers"></div>

## Multiple routes

If your `/routes/router.dart` file is getting big or you just want to separate your routes, there's a way. You can first define your new routes in a new file like the below example.

<br>

#### Example new routes file: `/lib/routes/dashboard_router.dart`

``` dart 
NyRouter dashboardRouter() => nyRoutes((router) {
   
   Add your routes here
   router.route("/account", (context) => AccountPage());
   
   router.route("/account/update", (context) => AccountUpdatePage());
});
```

Then, open `/lib/main.dart` and add the new router.

``` dart
Nylo nylo = await Nylo.init(router: buildRouter(), setup: boot);
...

nylo.addRouter(dashboardRouter()); // new routes
```