title: Login Page Separated From Single-page Application (SPA) in ReactJS
body: <p>I am developing a single-page application (SPA) in ReactJS, and I would like to know how can I have the Login page in a separate page.</p>
  
  <p>I am using <code>create-react-app</code> as a base for my application, and I am currently defining the template for my SPA in the <code>App.js</code> file, and each component in a different .js file: <code>Page1.js</code>, <code>Page2.js</code>, etc. I am using <code>react-router-dom</code> (V ^4.2.2) for the routing of my app.</p>
  
  <p>My <code>App.js</code> file:</p>
  
  <pre><code>//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 (
        &lt;Router&gt;
          &lt;Layout&gt;
            &lt;Sider&gt;
               //some code
            &lt;/Sider&gt;
            &lt;Layout&gt;
              &lt;Header&gt;
               //some code
              &lt;/Header&gt;
              &lt;Content&gt;
                &lt;Route exact path="/" component={Home}/&gt;
                &lt;Route path="/page1" component={Page1}/&gt;
                &lt;Route path="/page2" component={Page2}/&gt;
              &lt;/Content&gt;
              &lt;Footer&gt;
               //some code     
              &lt;/Footer&gt;
            &lt;/Layout&gt;
          &lt;/Layout&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>