单击后如何获取登录按钮以导航到新页面。我已经下载并使用了 React 路由器 dom

Question

您好，我想知道如何导航到新页面。请查看我的代码并尽你所能提供帮助。我正在使用的是 React router Dom，它可以工作，但我想将它用作一种方法谢谢！

import React, {Component} from "react";
import "./App.css";
import {withRouter} from "react-router-dom";

class Login extends Component {



      onClick() {
        withRouter(({ history }) => (
            <div onClick={() => history.push('/')}>
                <button>Hello</button>
            </div>)
        )
        alert("Hello");
       };
    render() {



        return(
            <div style={{marginTop:-22}}>
                <div style={{backgroundImage:"url(https://freeios7.com/download/freeios7.com_apple_wallpaper_peach-grass-blur_iphone4.jpg)", height:900, width:1900}}>
                <div style={{display:"flex", flexDirection:"column", alignItems:"center", paddingTop:65}}>
                <div style={{display:"flex", flexDirection:"column", alignItems:"flex-end"}}>
                </div>
                <img src="https://www.moonlight.com.au/wp-content/themes/moonlight-2016/dist/images/moonlight-logo.png"/>
                </div>
            <div className="login-contents">
                <h1>Email</h1>
                <input 
                    className="inputdesign"
                    placeholder="Enter Email"/>
                <h1>Password</h1>
                <input
                className="inputdesign"
                    placeholder="Enter Password" />
                    <div style={{paddingTop:20}}>
                    <form>
                    <button onClick={this.onClick} className="loginbutton">Login</button>
                    </form>
                    </div>
                    <div className="loginhelp">
                    <div>New to Moonlight Cinema? Create Account</div>
                    <div>Forgot Password?</div>
                    </div>
                </div>
                </div>
            </div>
        )
    }
    }



    export default Login;

我正在尝试使用我的 onClick 方法进行导航。任何帮助表示赞赏！

Answer 1

用这个替换你的 onClick 函数

onClick = () => {
  this.props.history.push("/");   
};

还将您的组件包装在 withRouter 高阶组件中。

export default withRouter(Login);

单击后如何获取登录按钮以导航到新页面。我已经下载并使用了 React 路由器 dom

How to get a login button to navigate to a new page once clicked. I have downloaded and used the React router dom

reactjs

react-router

react-router-dom

react-dom