Estoy desarrollando una aplicación de una sola página (SPA) en ReactJS, y me gustaría saber cómo puedo tener la página de inicio de sesión en una página separada.

estoy usandocreate-react-app como base para mi aplicación, y actualmente estoy definiendo la plantilla para mi SPA en elApp.js y cada componente en un archivo .js diferente:Page1.js, Page2.js, etc. Estoy usandoreact-router-dom (V ^ 4.2.2) para el enrutamiento de mi aplicación.

MiApp.js archivo:

//node_modules (using ES6 modules)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

//others
import { Home } from './pages/Home.js';
import { Page1 } from './pages/Page1.js';
import { Page2 } from './pages/Page2.js';

//App variables
const { Content, Footer, Sider } = Layout;

class App extends Component {
  render() {
    return (
      <Router>
        <Layout>
          <Sider>
             //some code
          </Sider>
          <Layout>
            <Header>
             //some code
            </Header>
            <Content>
              <Route exact path="/" component={Home}/>
              <Route path="/page1" component={Page1}/>
              <Route path="/page2" component={Page2}/>
            </Content>
            <Footer>
             //some code     
            </Footer>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default App;