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

Posted 2022-10-03 勇敢*牛牛

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;