Как получить кнопку входа для перехода на новую страницу после нажатия.Я скачал и использовал React роутер дом - PullRequest
Новая
       61

Как получить кнопку входа для перехода на новую страницу после нажатия.Я скачал и использовал React роутер дом

0 голосов
/ 20 октября 2018

Привет, я хочу знать, как перейти на новую страницу.Пожалуйста, посмотрите на мой код и помогите со всем, что вы можете.Я использую 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 для навигации.Любая помощь приветствуется!

1 Ответ

0 голосов
/ 20 октября 2018

Замените функцию onClick этим 

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

Также поместите ваш компонент в компонент более высокого порядка withRouter. 

export default withRouter(Login);
...