登录页面与 ReactJS 中的单页应用程序 (SPA) 分离 [英] Login Page Separated From Single-page Application (SPA) in ReactJS

问题描述

我正在 ReactJS 中开发单页应用程序 (SPA)，我想知道如何在单独的页面中创建登录页面.

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.

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

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.

我的 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;

推荐答案

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

Before jumping to your codes, note that,

react-route-dom(又名 react router v4 及更高版本)中的 Route 只是一个 Component，它可能是 StatelessComponent 或呈现视图的 ComponentClass.你可以参考这里，
https://reacttraining.com/react-router/web/guides/philosophy

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

在你的问题中，

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

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

如果你的意思是你想在没有 Layout 的情况下渲染 Login 视图，那么你可能想要这样做，

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

在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,

1. 我添加了包含一个或多个 的 因为它会确保您的应用程序仅从 Route (记住 只是根据与 url 匹配的路径呈现视图的组件).因此，您可能希望将 <PageABC/> 与 <Switch/> 包装在一起，否则它将在后台呈现所有视图.
   参考:https://reacttraining.com/react-router/web/api/Switch
2. 尝试创建一个新组件
   并将您原来的 组件布局包装在新创建的

   .创建您的 <Login/> 组件以及您的登录页面布局
3. 它将完成将您的主要内容与您的登录页面分开的工作，但这不会对用户进行任何身份验证.您基本上可以通过访问 URL 上的 /login 自由进入登录页面，然后通过 URL 上的 / 返回主页.如果您想创建授权和 Unauthorised 路线，您可以查看本教程 All About React Router 4
4. 或者，您可以添加 <Redirect to="/somePublicUrl"/> 以确保您的应用在 url 与任何路由路径不匹配时始终呈现某些视图

1. 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
2. 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
3. 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
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.

这篇关于登录页面与 ReactJS 中的单页应用程序 (SPA) 分离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！