반응 버튼 리디렉션 페이지 클릭

반응 버튼 리디렉션 페이지 클릭

React와 부트스트랩을 사용하여 웹 어플리케이션을 만들고 있습니다.버튼 on클릭을 적용할 때 페이지를 다른 페이지로 리디렉션하는 데 어려움을 겪고 있습니다.href 후에 다른 페이지로 이동할 수 없습니다.

리액트 네비게이션 등을 사용하여 Button on Click을 사용하여 페이지를 탐색할 필요가 있는지 알려 주시겠습니까?

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

업데이트:

리액트 라우터 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를 후크로 리액트합니다.

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;

리액트 라우터 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;

리액트 라우터 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);

버튼을 링크로 사용하지 마십시오.대신 버튼으로 지정된 링크를 사용하십시오.

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

리액트 라우터 v5.1.2:

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

이것은 매우 간단하게 실시할 수 있기 때문에, 다른 기능이나 라이브러리를 사용할 필요는 없습니다.

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

리다이렉트로 방법을 찾으려고 했지만 실패했습니다.onClick 리다이렉트는 생각보다 간단합니다.다음과 같은 기본적인 JavaScript를 onClick 함수에 배치하기만 하면 됩니다.

window.location.href="pagelink"

먼저 Import:

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

다음으로 기능 또는 클래스에서 다음을 수행합니다.

const history = useHistory();

마지막으로, 당신은 그것을onClick기능:

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

이를 위한 매우 간단한 방법은 다음과 같습니다.

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

및 기능의 경우:

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

라우터를 사용하여 Import해야 하는 finlay:

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

다음 형식으로 내보냅니다.

export default withRouter (comp_name);

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

클릭 이벤트의 루트로 리다이렉트 하는 경우.

그냥 이렇게 해

기능 컴포넌트

props.history.push('/link')

인클래스 컴포넌트

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

예를 들어:

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

테스트 대상:

react-flash-dom: 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

버튼의 간단한 클릭 핸들러 및 설정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>
    );
  }
}

리액트 라우터 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>

        )
    }
}

또, navlink를 사용해 다른 뷰로 라우팅 하는 것도 곤란했습니다.

나의 실장은 다음과 같으며, 완벽하게 기능한다.

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

div로 감싸고 onClick 핸들러를 div에 할당합니다.history 객체를 사용하여 새 보기를 푸시합니다.

"react-router-dom"에서 {Link}을(를) 가져오고 함수를 사용하는 대신 하이퍼링크만 가져오십시오.

import {Link} from "react-router-dom";

<Button>
   <Link to="/yourRoute">Route Name</Link>
</Button>

언급URL : https://stackoverflow.com/questions/50644976/react-button-onclick-redirect-page