react-router-dom 6 js逻辑业务层跳转形式

news/2024/7/15 17:34:13 标签: javascript, react.js, 前端

react-router-dom 6 对props的使用也做了比较大的改动
目前的话 是要通过 react-router-dom 中的useNavigate函数来实现

参考代码如下

import React from "react";
import {
  useNavigate,
} from "react-router-dom";

const Alinput = () =>{
  let navigate = useNavigate()
  const fallback = () => {
    navigate("/")
  }
  const details = () => {
    navigate("/details")
  }
  return (
    <div>
      <div onClick={() => fallback()}>返回首页</div>
      <div onClick={() => details()}>查看详情</div>
    </div>
  )
}
export default Alinput;

http://www.niftyadmin.cn/n/1036670.html

相关文章

java 通过 Runnable接口实现线程

我们先创建一个java包 包下面创建两个类 customException 线程类 参考代码如下 public class customException implements Runnable {public void run () {for(int i 0;i < 100;i) {System.out.println("第" (i 1) "次输出");}} }这里 我们是通过…

JavaScript判断变量中是否包含小数点

直接通过正则就会很准确 let data 1.5; let rep/[\.]/; console.log(rep.test(data));当没有小数点 let data 33; let rep/[\.]/; console.log(rep.test(data));因为是正则 所以 就算是字符串也一样有效 let data "3.3"; let rep/[\.]/; console.log(rep.test(…

css修改滚动条样式

有一说一 系统默认的滚动条确实不是很美观 那么我就来带着大家修改一下他的样式 ::-webkit-scrollbar 设置整个滚动条的样式 一般用于设置宽度 你要跟什么元素加 就 元素::-webkit-scrollbar 例如你想 给body 就 body::-webkit-scrollbar ::-webkit-scrollbar-track 设置滚…

java Runnable实现线程方式中 通过Thread获取当前线程名称

观看本文 需要能通过 Runnable接口实现线程 如果不了解 可以先查看我的文章 java 通过 Runnable接口实现线程 我们会习惯用getName 给线程定义名字 但用了你会发现 Runnable里是没有这个方法的 因为你是通过 接口实现的 跟Thread类没有关系 自然拿不到 Thread类中的方法 不过…

vue监听元素滚动到底

给页面元素绑定事件进行监听 <div scroll"loadImg($event)"><div>监听滚动的元素</div> </div>然后在逻辑层中实现这个函数 loadImg(event){let elevent.target;if(el.scrollTopel.clientHeight>el.scrollHeight){console.log("处…

vue判断元素是否需要滚动

有些时候 我们给一些元素绑定了滚动 但其实有时候 因为内容没有超出 不需要滚动 我们就可以这样写判断逻辑 <div ref "dom"><div>滚动元素</div> </div>通过dom绑定虚拟dom 然后在逻辑层执行方法判断 let el this.$refs.dom; if(el.scro…

vue 通过逻辑控制el-dropdown组件展开和收起

el-dropdown在element ui中应用场景并不少 有些时候 我们下拉的内容并不是他本来的选项 用户选择后就没有关闭 这个时候 就需要我们在逻辑层开启或关闭他的菜单 <el-dropdown trigger"click" ref"messageDrop"> <el-button type"primary&q…

前端乾坤报错Failed to parse JSON from ‘ disable no undef‘: Unexpected token d in JSON at position 2

使用乾坤做了两个vue项目的父子嵌套 结果就报了这样的错 如果你子项目引入了public-path.js那么就会发现 这个问题是 public-path.js报的 我的 public-path.js 是这样写的 /*eslint disable no undef*/ // 上方这一行用于eslint的忽略&#xff0c;因为下方代码的指向其实是…