视频直播app源码，react 编程式导航实现页面跳转

一介绍

编程式导航: 通过js代码来实现页面跳转

案例:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?

答:

props.history.push("./home")

props.history.go(-1)

history:是react路由提供的,用来获取浏览器历史记录的相关信息.

push(path):跳转到某个页面,参数path表示要跳转的路径

go(n):返回某个页面,参数n表示前进或后退页面数量(-1表示后退一页)

二代码

import React from "react";<br>import {createRoot} from 'react-dom/client';<br>//导入路由的核心组件<br>import {HashRouter, BrowserRouter as Router, Route, Link} from "react-router-dom"<br> <br>class App extends React.Component {<br>    render() {<br>        return (<br>            <Router><br>                <h2>编程式导航app</h2><br>                <Link to="/login">去登录页面</Link><br>                <Route path="/login" component={Login}></Route><br>                <Route path="/home" component={Home}></Route><br>            </Router><br>        )<br>    }<br>}<br> <br>class Login extends React.Component {<br>    fn = () => {<br>        this.props.history.push("./home")<br>    }<br> <br>    render() {<br>        return (<br>            <div><br>                <h2>这是登录页面</h2><br>                <button onClick={this.fn}>登录</button><br>            </div><br>        )<br>    }<br>}<br> <br>const Home = (props) => {<br>    const back=()=>{<br>        //go(-1)表示返回上一个页面<br>        props.history.go(-1);<br>    }<br>    return(<br> <br>        <div><br>            <h2>我是后台首页</h2><br>            <button onClick={back}>返回登录页面</button><br>        </div><br>    )<br>}<br> <br>createRoot(document.getElementById('root')).render(<App/>);

以上就是视频直播app源码，react 编程式导航实现页面跳转，更多内容欢迎关注之后的文章