Reagieren Sie auf der Weiterleitungsseite auf die Schaltfläche Reagieren

Ich arbeite an einer Webanwendung mit React und Bootstrap. Wenn es um die Anwendung von Button onClick geht, fällt es mir schwer, eine Seite auf eine andere umzuleiten. Wenn ich nach einem href nicht auf die andere Seite gehen kann.

Würden Sie mir bitte sagen, ob es notwendig ist, React-Navigation oder andere zu verwenden, um mit Button onClick auf der Seite zu navigieren?

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

aktualisieren:

Reaktionsrouter v6:

import React from 'react';
import { useNavigate } from "react-router-dom";
function LoginLayout() {
  
  let navigate = useNavigate(); 
  const routeChange = () =>{ 
    let path = `newPath`; 
    navigate(path);
  }
  
  return (
     <div className="app flex-row align-items-center">
      <Container>
      ...          
          <Button color="primary" className="px-4"
            onClick={routeChange}
              >
              Login
            </Button>
      ...
       </Container>
    </div>
  );
}}

Router v5 mit Hooks reagieren:

import React from 'react';
import { useHistory } from "react-router-dom";
function LoginLayout() {
  
  const history = useHistory();
  
  const routeChange = () =>{ 
    let path = `newPath`; 
    history.push(path);
  }

  return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={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 LoginLayout;

mit React Router v5:

import { useHistory } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';
    
class LoginLayout extends Component {
  
  routeChange=()=> {
    let path = `newPath`;
    let history = useHistory();
    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 LoginLayout;

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

Verwenden Sie keine Schaltfläche als Link. Verwenden Sie stattdessen einen als Schaltfläche gestalteten Link.

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

Reaktionsrouter v5.1.2:

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

Dies ist sehr einfach möglich, Sie müssen dafür keine andere Funktion oder Bibliothek verwenden.

onClick={event =>  window.location.href="https://stackoverflow.com/your-href"}

Ich habe versucht, einen Weg mit Redirect zu finden, bin aber gescheitert. OnClick umzuleiten ist einfacher als wir denken. Platzieren Sie einfach das folgende grundlegende JavaScript in Ihrer onClick-Funktion, kein Affentheater:

window.location.href="https://stackoverflow.com/questions/50644976/pagelink"

Importieren Sie es zuerst:

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

Dann, in Funktion oder Klasse:

const history = useHistory();

Schließlich steckst du es in die onClick Funktion:

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

Eine sehr einfache Möglichkeit, dies zu tun, ist die folgende:

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

und für die funktion:

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

finlay müssen Sie mit Router importieren:

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

und exportiere es als:

export default withRouter (comp_name);