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

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

一 介绍

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

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

答:

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

props.history.go(-1)

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

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

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

二 代码

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

​

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