a543462378 2022-01-10 10:53 采纳率: 84.7%
浏览 36
已结题

react项目实现多个登录页

react项目当前是单个登录页,但是要求新增一个页面样式不同的登录页,之后可能还会再加,这些登录页怎么同时存在?
我当前的逻辑是访问页面index

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppShanDong from'./AppShanDong'

ReactDOM.render(
  <React.StrictMode>
    <AppShanDong />
  </React.StrictMode>,
  document.getElementById('root')
);

然后index.js页面打开APP.js

import React, { Suspense, lazy, useEffect } from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';
import ErrorBoundary from '@/components/ErrorBoundary'
import PageLoading from '@/components/PageLoading'
import { ConfigProvider } from 'antd';
import zh from 'antd/es/locale/zh_CN'

import moment from 'moment'
import 'moment/locale/zh-cn';

moment.locale('en');

const Login = lazy(() => import('@/pages/Login'))

const System = lazy(() => import('@/pages/System'));
const NotFound = lazy(() => import('@/components/NotFound'))

function App() {


  useEffect(() => {

    window.sessionStorage.setItem('baseURL', 'http://')
    window.sessionStorage.setItem('imageURL', 'http:///')

    window.sessionStorage.setItem('baseURL_TEST', '')

  }, []);

  return (
    <div className='my-app'>
      <ConfigProvider locale={zh}>
        <ErrorBoundary>
          <Suspense fallback={<PageLoading />}>
            <HashRouter>
              <Switch>
                <Route path='/' exact>
                  <Login />
                </Route>
                <Route path='/system'>
                  <System />
                </Route>
                <Route path='*'>
                  <NotFound />
                </Route>
              </Switch>
            </HashRouter>
          </Suspense>
        </ErrorBoundary>
      </ConfigProvider>
    </div>
  );
}
export default App;

Login页面如下

return (
        <Layout className={styles.layout}>
            <div className={styles.title}>
                <img src={logo} alt='logo' className={styles.logo} />
                <div>监管平台</div>
            </div>
            <div className={styles.bg}>
                <div className={styles.card}>
                    <h2>登录</h2>
                    <Form onFinish={onFinish}>
                        <Form.Item name='name' rules={[{ required: true, message: "请输入账号" }]}>
                            <Input size='large' placeholder='账号' prefix={<UserOutlined />} />
                        </Form.Item>
                        <Form.Item name='pwd' rules={[{ required: true, message: "请输入密码" }]}>
                            <Input size='large' type='password' placeholder='密码' prefix={<LockOutlined />} />
                        </Form.Item>
                        <Button type='primary' block htmlType='submit' loading={loading} size='large'>登录</Button>
                    </Form>
                </div>
            </div>
            <div className={styles.footer}>
                技术支持单位:
            </div>

        </Layout>
    )

怎么增加其他登录页面?

  • 写回答

3条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-10 11:00
    关注

    要么增加路由判断 根据路由去判断登录页

    要么新加一个页面,加 tabs 根据点击的登录页去判断需要进入或者渲染那个页面

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月11日
  • 已采纳回答 1月10日
  • 创建了问题 1月10日

悬赏问题

  • ¥15 nrf52810-c三个a 程序
  • ¥15 lego-loam跑出来的roll误差很大
  • ¥50 求一个半透明没有锯齿的圆角窗体的实现例子
  • ¥15 STM32cubeMX里的FreeRTOS无法释放内存
  • ¥15 CATIA有些零件打开直接单机确定终止
  • ¥15 请问有会的吗,用MATLAB做
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并—
  • ¥15 孟德尔随机化怎样画共定位分析图
  • ¥18 模拟电路问题解答有偿速度
  • ¥15 CST仿真别人的模型结果仿真结果S参数完全不对