react基础路由(无懒加载）antd组件库基础使用方法

安装路由

安装路由：npm i react-router-dom@5.3.0

导入路由组件配置路由

在 App 组件中：

0. 导入路由组件
1. 导入页面组件
2. 配置路由规则

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Login from './pages/Login'
import Layout from './pages/Layout'
import NotFound from './pages/NotFound'
export default function App() {
  return (
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/layout" component={Layout}></Route>
          {/* 增加一个404 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>
  )
}

组件库 - antd

目标

了解antd的基本使用，能用 Button 组件渲染按钮

antd

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

Ant Design

antd PC 端组件库文档

安装

npm i antd

使用步骤

在 index.js 中导入 antd 的样式文件

// 1 在 index.js 中导入 antd 的样式文件
import 'antd/dist/antd.css'

在其他组件中引入使用

// 2 在 Login 页面组件中，使用 antd 的 Button 组件
import { Button } from 'antd'
​
const Login = () => (
  <div>
    <Button type="primary">Button</Button>
  </div>
)