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

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

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/>);

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