如何在没有反应挂钩的情况下更改页面？答案

【问题标题】：How can I change the page whitout react hoocks?如何在没有反应挂钩的情况下更改页面？
【发布时间】：2022-12-10 13:55:06
【问题描述】：

怎么导航？

import ButtonLogReg from "../components/ButtonLogReg"
import { Link } from 'react-router-dom'
import { useContext } from 'react'
import Context from '../components/Context'
import { useNavigate } from 'react-router-dom'

function Launcher() {
    log.info('Home -> render')

    const { showAlert } = useContext(Context)

    const handler = event => {

      event.preventDefault()
      try(
         asyncFunction()
         )catch(error)
    }

    return <main>
        <nav>
            <h2 >Go?</h2>
            <Link to="/Mypath>"<ButtonLogReg onClick={handler}>READY</ButtonLogReg></Link>
            <Link to="/"><h2>Back</h2></Link>
        </nav>
    </main>
}


export default Launcher

大家好，我尝试在 /Mypath 导航，但我不能用，我该怎么做？

【问题讨论】：

你有没有在应用程序或其他东西中设置你的路线？ (reactrouter.com/en/main/components/routes)
尝试从链接内的按钮中删除 onClick

标签： reactjs react-link

【解决方案1】：

希望您已经在App.js 中设置了路线，那么这可能会对您有所帮助：

import ButtonLogReg from "../components/ButtonLogReg"
import { useContext } from 'react'
import Context from '../components/Context'
import { useNavigate } from 'react-router-dom'

function Launcher() {
    log.info('Home -> render')

    const { showAlert } = useContext(Context)

    const handler = event => {

        event.preventDefault()
        try(
            asyncFunction()
        )catch (error)
        }

    const navigate = useNavigate();

    return <main>
        <nav>
            <h2 >Go?</h2>
            <ButtonLogReg onClick={() => navigate("/Mypath")} >READY</ButtonLogReg>
            <h2 onClick={() => navigate("/")} >Back</h2>
        </nav>
    </main>
}


export default Launcher

【讨论】：