路由

link 点击跳转

<link to="first">页面一</link>

Route 占位符

相当于vue里的路由占位符<router-view></router-view>，不同点在于需要写匹配的路径和匹配之后展示的页面

<Route path="first" component={First} />

编程式导航

概念：通过代码进行页面跳转

API

• history 是React路由提供的，用于获取浏览器历史记录的相关信息
• push(path): 跳转到某个页面，参数path表示要跳转的路径

this.props.history.push('/home')

新增匹配模式

默认的路由匹配只要以path开头就可以被匹配到，如果不希望这样可以添加exact属性

//此时该组件只能匹配pathname这一种情况
<Route exact path="/" component={Home} />

嵌套路由

嵌套路由的path，格式以父路由path开头（父组件展示，子组件才会展示）,本质上和普通路由没有区别只是path和放的位置不同

<Router>
    <div>
        <Route path="/home" component={Home} />
    </div>
</Router>
// 子路由需要写在父路由的页面里，相当于占位符在父页面哪里展示
const Home = () = > (
    <div>
        <Route path="/home/news" component={News} />
    </div>
)

总结

1. Router组件包裹整个应用，只需要使用一次
2. link组件是入口，Router组件是出口
3. 通过props.history实现编程式导航
4. 默认模糊匹配，添加exact变精确匹配

ant ui库

表格添加复选框

import React, {Component} from 'react';
import { Button, Table, Pagination, Input  } from 'antd';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';

import './index.scss';
export default class index extends Component<any, any> {
  constructor (props: any) {
    super(props);
    this.state = {
      total: 10,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index'
        },
        {
          title: '名称',
          dataIndex: 'devName',
          key: 'devName'
        },
       
          title: 'ID',
          dataIndex: 'devID',
          key: 'devID'
        },
        {
          title: '操作',
          key: 'dos',
          render: (text: any, record: any) => (
            <div>
              <a className="buleBtn updataCls">查看</a>
              <a className="buleBtn">下载</a>
            </div>
          )
        }
      ],
      tableData: [
        {
          key: 1,
          index: 46,
          devName: '0123456789',
          devID: '0123456789',
        }
      ],
      selectedRowKeys: [],
    };
  }


  onSelectChange = (selectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render () {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
              <Table dataSource={this.state.tableData} columns={this.state.columns}
                pagination={false} scroll={{ y: 500 }} rowSelection={rowSelection}
              />
    );
  }
}