反应按钮onClick重定向页面

Question

我正在使用React和bootstrap开发Web应用程序.当应用按钮onClick时,我花了很多时间让我的页面重定向到另一个.如果在一个href后,我不能去另一页.

那么请你告诉我是否需要使用反应导航或其他方法使用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>
    );
  }
}

Answer 1

使用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);

Answer 2

不要使用按钮作为链接。相反，使用样式为按钮的链接。

<Link to="/signup" className="btn btn-primary">Sign up</Link>

Answer 3

反应路由器 v5.1.2：

import { useHistory } from 'react-router-dom';
const App = () => {
   const history = useHistory()
   <i className="icon list arrow left"
      onClick={() => {
        history.goBack()
   }}></i>
}

Answer 4

这可以非常简单地完成，您不需要为它使用不同的函数或库。

onClick={event =>  window.location.href='/your-href'}

Answer 5

我试图找到重定向的方法，但失败了。重定向 onClick 比我们想象的要简单。只需将以下基本 JavaScript 放在您的 onClick 函数中，不要乱搞：

window.location.href="pagelink"

Answer 6

首先，导入它：

import { useHistory } from 'react-router-dom';

然后，在函数或类中：

const history = useHistory();

最后，你把它放在onClick函数中：

<Button onClick={()=> history.push("/mypage")}>Click me!</Button>

Answer 7

一个非常简单的方法是通过以下方式：

onClick={this.fun.bind(this)}

和功能：

fun() {
  this.props.history.push("/Home");
}

finlay 你需要用路由器导入：

import { withRouter } from 'react-router-dom';

并将其导出为：

export default withRouter (comp_name);

Answer 8

useHistory()fromreact-router-dom可以解决你的问题

import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationDemo() {
  const history = useHistory();
  const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');

  return (
   <div>
   <button onClick={navigateTo} type="button" />
   </div>
  );
}
export default NavigationDemo;

Answer 9

如果以上所有方法都失败，请使用以下方法：

    import React, { Component } from 'react';
    import { Redirect } from "react-router";
    
    export default class Reedirect extends Component {
        state = {
            redirect: false
        }
        redirectHandler = () => {
            this.setState({ redirect: true })
            this.renderRedirect();
        }
        renderRedirect = () => {
            if (this.state.redirect) {
                return <Redirect to='/' />
            }
        }
        render() {
            return (
                <>
                    <button onClick={this.redirectHandler}>click me</button>
                    {this.renderRedirect()}
                </>
            )
        }
    }

Answer 10

如果要重定向到 Click 事件的路由。

就这样做

在功能组件中

props.history.push('/link')

类内组件

this.props.history.push('/link')

例子：

<button onClick={()=>{props.history.push('/link')}} >Press</button>

测试：

react-router-dom: 5.2.0,

反应：16.12.0

Answer 11

如果您已经创建了一个类来定义按钮的属性（如果您已经创建了一个按钮类），并且您想在另一个类中调用它并通过您在这个新类中创建的按钮将其链接到另一个页面，只需导入您的“按钮”（或按钮类的名称）并使用以下代码：

import React , {useState} from 'react';
import {Button} from '../Button';

function Iworkforbutton() {
const [button] = useState(true);

return (
    <div className='button-class'>
        {button && <Button onClick={()=> window.location.href='/yourPath'}
            I am Button </Button>
    </div>
    )
}

export default Iworkforbutton