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

发布时间：2020-12-15 20:11:41 所属栏目：百科来源：网络整理

导读：我正在ReactJS中开发一个单页面应用程序(SPA),我想知道如何在单独的页面中使用Login页面. 我使用create-react-app作为我的应用程序的基础,我目前在App.js文件中为我的SPA定义模板,并在不同的.js文件中定义每个组件：Page1.js,Page2.js,我正在使用react-route

我正在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;

解决方法

在跳转到您的密码之前,请注意,

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

在你的问题中,

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

如果你想要在没有布局的情况下渲染“登录”视图,那么你可能想要这样做,

在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

我想在这里提几点,

>我添加< Switch>包含一个或多个< Route />因为它将确保您的应用程序仅从Route渲染一个视图(记住< Route />只是基于您的匹配路径使用url呈现视图的组件).因此,您可能希望包装< PageABC />与< Switch />否则它将在后台渲染所有视图.
参考：https://reacttraining.com/react-router/web/api/Switch
>尝试创建一个新组件< Main />并包装您的原始< App />新创建的< Main />中的组件布局.创建您的<登录/>组件以及您的登录页面布局
>它将完成将您的主要内容与登录页面分开的工作,但这不会对用户进行身份验证.您可以通过访问/登录URL并通过URL访问主页面来自由地进入登录页面.如果要创建授权
和未经授权的路线,您可以在All About React Router 4查看本教程
>您可以选择添加< Redirect to =“/ somePublicUrl”/>如果url与任何路径路径不匹配,请确保您的应用始终呈现某些视图

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!