> For the complete documentation index, see [llms.txt](https://deskpro.gitbook.io/apps-developer-guide-old/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deskpro.gitbook.io/apps-developer-guide-old/ui-patterns/how-do-i-split-my-app-into-different-screens.md).

# 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>
    );
  }
}
```