# How do I split my app into different screens

The most simple way is to use the light-weight router from the `@deskpro/apps-sdk-react` package. The router is an object with a method named `to` that allows you to change the current screen when called with a screen name:

```javascript
  const { route } = this.props;
  route.to('my-screen')
```

You can also pass parameters to your screen:

```javascript
  const { route } = this.props;
  route.to('my-screen', { myParam: 5 })
```

You will need to import the router components:

```javascript
    import { Routes, Route } from '@deskpro/apps-sdk-react';
```

In your render method, wrap your screens in `Route` containers:

```javascript
class App extends React.PureComponent {
  static propTypes = { 
     /**
     * Instance of the Deskpro App Sdk Client
     */
    dpapp: PropTypes.object,

    /**
     * Instance of sdk router.
     */
    route:   PropTypes.object,
  };

  /**
   * Show the authentication screen immediately after the component is mounted
   */
  componentDidMount() {
    const { route } = this.props;
    route.to('auth');
  }

  /**
   * @returns {*}
   */
  render() {
    return (
      <Routes>
        <Route location="auth" component={PageAuth} />
        <Route location="home" component={PageHome} />
        <Route defaultRoute>
          <p>Loading</p>
        </Route>
      </Routes>
    );
  }
}
```