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

Question

我正在ReactJS中开发一个单页面应用程序(SPA),我想知道如何在单独的页面中使用Login页面.

我使用create-react-app作为用于我的应用程序的基极,和我目前限定用于我的在SPA模板App.js文件,并以不同的js文件的每一分量:Page1.js,Page2.js等我使用react-router-dom(V ^ 4.2.2)的我的应用程序的路由.

我的App.js档案:

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

Answer 1

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

的Route在react-route-dom（又名反应路由器v4和以上）仅仅是一个Component其中可能StatelessComponent或ComponentClass用于呈现的视图。您可以在这里参考，
https：//reacttraining.com/react-router/web/guides/philosophy

在您的问题中，

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

如果您想在不渲染Login视图的情况下使用Layout此方法，

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

希望对您有所帮助。让我知道是否有什么事缠住你的头。