登录页面与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中的Route(又名React Router v4及更高版本)只是一个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

我想在这里提几点，

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

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屋！