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

Question

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

我使用create-react-app作为我的应用程序的基础，我目前在App.js文件中为我的SPA定义模板，并且在不同的.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. 它将完成将您的主要内容与登录页面分开的工作，但这不会对用户进行身份验证。您可以通过访问URL上的/login并通过URL上的/返回主页，自由地进入登录页面。如果您想创建授权和未授权路线，您可以查看本教程All About React Router 4
4. 您可以选择添加<Redirect to="/somePublicUrl" />，以确保您的应用始终呈现某些视图，如果网址与任何路径路径不匹配

我希望它有所帮助。如果有什么东西不能包裹你，请告诉我。