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

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条回答 默认 最新

相关推荐 更多相似问题