Кнопка реакции на странице перенаправления щелчка

Простой обработчик щелчка по кнопке и настройка window.location.hash сделают свое дело, если ваш пункт назначения также находится в приложении.

Вы можете прослушать событие hashchange на window, проанализировать полученный URL, вызвать в this.setState(), и у вас будет собственный простой маршрутизатор библиотека не нужна.

class LoginLayout extends Component {
    constuctor() {
      this.handlePageChange = this.handlePageChange.bind(this);
      this.handleRouteChange = this.handleRouteChange.bind(this);
      this.state = { page_number: 0 }
    }

  handlePageChange() {
    window.location.hash = "#/my/target/url";
  }

  handleRouteChange(event) {
    const destination = event.newURL;
    // check the URL string, or whatever other condition, to determine
    // how to set internal state.
    if (some_condition) {
      this.setState({ page_number: 1 });
    }
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.handleRouteChange, false);
  }

  render() {
    // @TODO: check this.state.page_number and render the correct page.
    return (
      <div className = "app flex-row align-items-center">
        <Container>
          ...
                <Row>
                  <Col xs = "6">                      
                    <Button 
                       color = "primary"
                       className = "px-4"
                       onClick = {this.handlePageChange}
                    >
                        Login
                     </Button>
                  </Col>
                  <Col xs = "6" className = "text-right">
                    <Button color = "link" className = "px-0">Forgot password </Button>
                  </Col>
                </Row>
           ...
        </Container>
      </div>
    );
  }
}

Обновить:

React Router v5 с хуками:

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;

с 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;

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

Я пытался найти способ с помощью Redirect, но потерпел неудачу. Перенаправление onClick проще, чем мы думаем. Просто поместите следующий базовый JavaScript в свою функцию onClick, без обезьяньих дел:

window.location.href = "pagelink"

Не используйте кнопку как ссылку. Вместо этого используйте ссылку, стилизованную под кнопку.

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

Очень простой способ сделать это:

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

и для функции:

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

Finlay вам нужно импортировать с помощью Router:

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

и экспортировать как:

export default withRouter (comp_name);

Это можно сделать очень просто, вам не нужно использовать для этого другую функцию или библиотеку.

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

С React Router v5.1:

import {useHistory} from 'react-router-dom';
import React, {Component} from 'react';
import {Button} from 'reactstrap';
.....
.....
export class yourComponent extends Component {
    .....
    componentDidMount() { 
        let history = useHistory;
        .......
    }

    render() {
        return(
        .....
        .....
            <Button className = "fooBarClass" onClick = {() => history.back()}>Back</Button>

        )
    }
}

React Router v5.1.2:

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

У меня также были проблемы с переходом к другому виду с помощью navlink.

Моя реализация была следующей и работает отлично;

<NavLink tag='li'>
  <div
    onClick = {() =>
      this.props.history.push('/admin/my- settings')
    }
  >
    <DropdownItem className='nav-item'>
      Settings
    </DropdownItem>
  </div>
</NavLink>

Оберните его в div, назначьте ему обработчик onClick. Используйте объект истории, чтобы отправить новое представление.

Сначала импортируйте его:

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

Затем в функции или классе:

const history = useHistory();

Наконец, вы помещаете его в функцию onClick:

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

useHistory() от react-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;

Если все вышеперечисленные методы не работают, используйте что-то вроде этого:

    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()}
                </>
            )
        }
    }

если вы хотите перенаправить на маршрут по событию Click.

Просто сделай это

В функциональном компоненте

props.history.push('/link')

В компоненте класса

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

Пример:

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

Проверено на:

реагировать-маршрутизатор-дом: 5.2.0,

реагировать: 16.12.0

Если вы уже создали класс для определения свойств вашей кнопки (если у вас уже есть класс кнопки), и вы хотите вызвать его в другом классе и связать его с другой страницей с помощью кнопки, созданной в этом новом классе, просто импортируйте вашу «кнопку» (или имя вашего класса кнопок) и используйте приведенный ниже код:

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