react项目实现多个登录页

Question

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>
    )

怎么增加其他登录页面？

Answer 1

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

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