在ReactJS中将登录页面与单页应用程序（SPA）分离

Question

在ReactJS中将登录页面与单页应用程序（SPA）分离

reactjsauthenticationreact-routersingle-page-applicationreact-router-dom

13

我正在使用ReactJS开发单页应用程序（SPA），想知道如何将登录页面放在单独的页面上。

我使用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;

- Julia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- loala.js · Accepted Answer

在开始编写代码之前，请注意：

react-route-dom 中的 Route（也称为 react router v4 及以上版本）只是一个组件，它可以是无状态组件或组件类，用于呈现视图。您可以在此处查阅相关信息：
https://reacttraining.com/react-router/web/guides/philosophy

根据您的问题，

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

如果您的意思是在不使用 Layout 的情况下呈现 Login 视图，则可以按照以下方式操作：

在 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

这里有几点需要注意：

我添加了一个包含一个或多个<Route />的<Switch>，这将确保您的应用程序仅从与url匹配的路径对应的<Route />渲染一个视图（请记住<Route />仅是根据匹配的路径渲染视图的组件）。因此，您可能需要将原来的<PageABC />包装在<Switch />中，否则它将在后台渲染所有视图。
参考：https://reacttraining.com/react-router/web/api/Switch
尝试创建一个新组件<Main />，并将原始的<App />组件布局放入新创建的<Main />中。也创建您的<Login />组件以及登录页面布局。
这将把您的主要内容与登录页面分开，但这不会对身份验证用户做任何事情。您基本上可以通过访问URL上的/login自由进入登录页面，并通过URL上的/返回主页面。如果您想创建授权和未授权路由，则可以查看此教程All About React Router 4
可选地，您可以添加<Redirect to="/somePublicUrl" />以确保您的应用程序始终呈现某些视图，如果url不匹配任何路由路径。

希望这有所帮助。如果有什么让您不明白的地方，请告诉我。