“This is the fourth day of my participation in the 2022 First Text Challenge.” The 2022 First Text Challenge recently wanted to do a project with Alibaba’s Umi price structure, which is recorded here at 📝. If there is anything wrong, I hope the big man corrects it.

This is the article creating the Umi project

Want to add your own page

routing

We found a routing configuration file called routes.ts, but found that this is not a real routing configuration.

As mentioned in the UMI documentation,Document links:

If the configuration of the project is not complex, it is recommended to write the configuration in.umirc.ts. If the project configuration is complex, you can write the configuration in config/config.ts and separate part of the configuration. For example, you can separate the routing configuration into routes.ts.

// config/routes.ts
export default[{exact: true.path: '/'.component: 'index'},];Copy the code

// config/config.ts
import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
  routes: routes,
});
Copy the code

So all the routes we want to add are in config.ts

Add the routing

The following client contents are newly added routesAfter adding, we see the following error on the console:

This is because the corresponding configuration is not added to the menu configuration file.

Add menu Configuration

The path is as follows: SRC /locales/ zh-cn /menu.ts. Other files, such as en-us, correspond to the English menu configuration. Once the menus for each language are configured, the language switch is implemented.

Add a page

With the route configured, we can write the page. Create a new client folder,So let’s start with a page index.

// Introduce useState, useEffect
import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
// Reference components in antDesign
import { Col, Row ,Input,Button} from 'antd';
// Import ICONS
import { SearchOutlined } from '@ant-design/icons';
import style from './index.less'
// FC is a functional component
const Index: FC<Record<string, any>> = () = > {
// Deconstruct Search in Input
const { Search } = Input;

 return(
     <div className={style.container}>
        
       
     </div>)}export default Index
Copy the code

FC< here is the data type of props >

interface Props{
    title:string
}
const Index: FC<Props> = ({title}) = >{}Copy the code

I’ll leave it there, and we’ll see how he does it.

The login

First, find the Login page.

Find a way to submit a login

  const handleSubmit = async (values: API.LoginParams) => {
    try {
      // Login Indicates the login interface
      const msg = awaitlogin({ ... values, type });If the value of status is OK, the login succeeded. The fetchUserInfo() method is used to jump to the page
      {"status":" OK ","currentAuthority":"admin"}
      if (msg.status === 'ok') {
        const defaultLoginSuccessMessage = intl.formatMessage({
          id: 'pages.login.success'.defaultMessage: 'Login successful! '});// Success prompt
        message.success(defaultLoginSuccessMessage);
        Let's look at the code for fetchUserInfo() in a moment
        await fetchUserInfo();
        /** This method redirects to the redirect parameter */
        if(! history)return;
        const { query } = history.location;
        const { redirect } = query as { redirect: string };
        history.push(redirect || '/');
        return;
      }
      console.log(msg);
      // Set the user error message if it fails
      setUserLoginState(msg);
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure'.defaultMessage: 'Login failed, please try again! '}); message.error(defaultLoginFailureMessage); }};Copy the code

User information is stored in the hook useModel.

  const { initialState, setInitialState } = useModel('@@initialState');
  const intl = useIntl();

  const fetchUserInfo = async() = > {const userInfo = awaitinitialState? .fetchUserInfo? . ();if (userInfo) {
      await setInitialState((s) = > ({
        ...s,
        currentUser: userInfo, })); }};Copy the code

In fact, the fetchUserInfo method is written in app.tsx. Only when the MSG user information is returned, can we jump to the internal page of our system.