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:

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

You can also pass parameters to your screen:

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

You will need to import the router components:

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

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

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