javascript - react按钮onClick重定向页面(react button onClick redirect page)

Question

I am working on web application using React and bootstrap.(我正在使用React和bootstrap开发Web应用程序。)

When it comes to applying button onClick, it takes me hard time to let my page being redirect to another.(当应用按钮onClick时，我很难让我的页面重定向到另一个页面。) if after a href , I cannot go the another page.(如果在href之后，我无法进入另一个页面。) So would you please tell me is there any need for using react-navigation or other to navigate the page using Button onClick ?(所以，请您告诉我是否有必要使用React-navigation或其他通过Button onClick来导航页面？) import React, { Component } from 'react'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap'; class LoginLayout extends Component { render() { return ( <div className="app flex-row align-items-center"> <Container> ... <Row> <Col xs="6"> <Button color="primary" className="px-4"> Login </Button> </Col> <Col xs="6" className="text-right"> <Button color="link" className="px-0">Forgot password?</Button> </Col> </Row> ... </Container> </div> ); } }   ask by Raju yourPepe translate from so

Answer 1

use React Router v4:(使用React Router v4：)

import { withRouter } from 'react-router-dom'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap'; class LoginLayout extends Component { constuctor() { this.routeChange = this.routeChange.bind(this); } routeChange() { let path = `newPath`; this.props.history.push(path); } render() { return ( <div className="app flex-row align-items-center"> <Container> ... <Row> <Col xs="6"> <Button color="primary" className="px-4" onClick={this.routeChange} > Login </Button> </Col> <Col xs="6" className="text-right"> <Button color="link" className="px-0">Forgot password?</Button> </Col> </Row> ... </Container> </div> ); } } export default withRouter(LoginLayout);