Página de login separada do aplicativo de página única (SPA) no ReactJS

Estou desenvolvendo um aplicativo de página única (SPA) no ReactJS e gostaria de saber como posso ter a página de login em uma página separada.

estou usandocreate-react-app como base para o meu aplicativo, e atualmente estou definindo o modelo para o meu SPA noApp.js e cada componente em um arquivo .js diferente:Page1.js, Page2.jsetc. estou usandoreact-router-dom (V ^ 4.2.2) para o roteamento do meu aplicativo.

MinhasApp.js Arquivo:

//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;