Login Page Separated From Single-page Application (SPA) in ReactJS

问题

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.

I am using create-react-app as a base for my application, and I am currently defining the template for my SPA in the App.js file, and each component in a different .js file: Page1.js, Page2.js, etc. I am using react-router-dom (V ^4.2.2) for the routing of my app.

My App.js file:

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

回答1:

Before jumping to your codes, note that,

The Route in react-route-dom (aka react router v4 and above ) is just a Component where it may be StatelessComponent or ComponentClass that render a view. you can reference here,
https://reacttraining.com/react-router/web/guides/philosophy

In your question ,

I would like to know how can I have the Login page in a separate page

if you meant you want to render the Login view without Layout then you might want to do this way,

in App.js

import Main from './Main';    // Your original <App /> page
import Login from './Login';  // Your new <Login /> page  

// In your App component  

<Router>  
  <Switch>
    <Route exact path="/" component={Main} />  
    <Route path="/login" component={Login} /> 
  </Switch>
</Router>

// Export your App component

There are few points i would like to mention here,

I add <Switch> that contains one or more than one <Route /> as it will make sure your app only render one view from Route ( Remember <Route /> is just component that render view based on your matching path with url ). Therefore you may want to wrap your <PageABC /> with <Switch /> otherwise it will render all views in the background.
Reference: https://reacttraining.com/react-router/web/api/Switch
Try create a new component <Main /> and wrap your original <App /> component layout in the newly created <Main />. Create your <Login /> component as well with your login page layout
It will do the job that separate your main content with your login page but this won't do anything to authenticate user. You can basically freely go to login page by visiting /login on URL and back to main page by / on URL. If you want to create Authorised and Unauthorised route you can check this tutorial out All About React Router 4
Optionally you can add <Redirect to="/somePublicUrl" /> to make sure your app always render some view if url does not match any route path

I hope it helps. Let me know if something does not wrap your head.

来源：https://stackoverflow.com/questions/47790081/login-page-separated-from-single-page-application-spa-in-reactjs

标签

reactjs

react-router

single-page-application

react-router-dom