ReactJS 中的登录页面与单页应用程序 (SPA) 分离

我正在 ReactJS 中开发一个单页面应用程序（SPA），我想知道如何在单独的页面中拥有登录页面。

我在用create-react-app作为我的应用程序的基础，我目前正在定义 SPA 的模板App.js文件，以及不同 .js 文件中的每个组件：Page1.js, Page2.js等我正在使用react-router-dom(V ^4.2.2) 用于我的应用程序的路由。

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;

在跳转到代码之前，请注意，

The Route in react-route-dom（又名React Router v4及以上版本）只是一个Component其中可能是渲染视图的 StatelessComponent 或 ComponentClass。你可以参考这里，
https://reacttraining.com/react-router/web/guides/philosophy https://reacttraining.com/react-router/web/guides/philosophy

在你的问题中，

我想知道如何将登录页面放在单独的页面中

如果你的意思是你想渲染Login查看没有Layout那么你可能想这样做，

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

这里有几点我想提一下，

1. I add <Switch>包含一个或多个<Route />因为它将确保您的应用程序仅渲染一个视图Route（ 记住<Route />只是根据与 url 匹配的路径渲染视图的组件）。因此你可能想要包装你的<PageABC /> with <Switch />否则它将在后台渲染所有视图。
   参考：https://reacttraining.com/react-router/web/api/Switch https://reacttraining.com/react-router/web/api/Switch
2. 尝试创建一个新组件<Main />并包装你的原件<App />新创建的组件布局<Main />。创建您的<Login />组件以及您的登录页面布局
3. 它将完成将主要内容与登录页面分开的工作，但这不会对用户进行身份验证。您基本上可以通过访问自由地进入登录页面/login在 URL 上并返回主页/在网址上。如果你想创建授权 和未经授权你可以查看这个教程关于 React Router 4 的一切 https://css-tricks.com/react-router-4/
4. 您可以选择添加<Redirect to="/somePublicUrl" />确保您的应用程序在 url 与任何路由路径不匹配时始终呈现一些视图

我希望它有帮助。如果有什么事情让您无法理解，请告诉我。