react——在函数组件中使用路由——利用hook函数完成路由切换——table表格的基础使用

react——在函数组件中使用路由

第一种方法：

• 安装：react-router-dom
• 因为是函数组件，所以需要用withRouter包裹导出

import {
    
    withRouter} from "react-router-dom"

const App = () => {
    
    
    return (
        <div>
        <h1>APP</h1>
        </div>
    );
}

export default withRouter(App);

使用方法为传入参数：

解构props：{history:{push}}

import {
    
    withRouter} from "react-router-dom"

const App = ({
     
     history:{
     
     push}}) => {
    
    

    const oncilckHander =  ()=>{
    
    
        push("/home/index")
    }

    return (
        <div>
        <h1>APP</h1>
        <button onClick={
    
    oncilckHander}>adssd</button>
        </div>
    );
}

export default withRouter(App);

---

使用hook函数

react-router-dom-hook

使用它提供的useHistory函数

---

必须使用在顶层的路由对象中

import {
    
    withRouter,useHistory} from "react-router-dom"

代码演示：

import {
    
    useHistory} from "react-router-dom"

const App = () => {
    
    
    const history = useHistory()
    
    const oncilckHander =  ()=>{
    
    
        history.push("/home/index")
    }

    return (
        <div>
        <h1>APP</h1>
        <button onClick={
    
    oncilckHander}>adssd</button>
        </div>
    );
}

export default App;