环球最资讯丨react怎么实现跳转页面

时间:2023-01-03 08:57:08       来源:PHP中文网

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现跳转页面?


(资料图)

react项目实现页面跳转

更新:

useNavigate()的使用

import { useNavigate } from "react-router-dom";  const navigate = useNavigate();  navigate(-1)//适用于返回上级页面  navigate("/router");//也可直接加路径
登录后复制

1.使用button组件

首先引用

import { Button } from "antd";
登录后复制

然后在button组件里面写onclick,在render外面写方法内容

class App extends Component {tiaozhuan(){    window.location.href="http://www.baidu.com"   }  render(){  return (    <>    

123

); }};export default App;
登录后复制

2.使用link路由

首先引用

import { Link } from "umi";
登录后复制

然后在这个路由文件里加上你要跳转页面的路由

接着在return里面写这句话就行了。

跳转页面
登录后复制

3.最简单的是a标签

跳转页面
登录后复制

推荐学习:《react视频教程》

以上就是react怎么实现跳转页面的详细内容,更多请关注php中文网其它相关文章!

关键词: 相关文章 视频教程