리액트 라우터를 사용하여 페이지를 리디렉션하는 가장 좋은 방법은 무엇입니까?

리액트 라우터를 사용하여 페이지를 리디렉션하는 가장 좋은 방법은 무엇입니까?

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

1년 전에 문을 닫았어요

커뮤니티는 10개월 전에 이 질문을 재개할지 여부를 검토한 후 종료했습니다.

원래 종료 이유가 해결되지 않았습니다.

이 질문을 개선하다

리액트 라우터는 처음 접해보고 페이지를 리다이렉트하는 방법은 여러 가지가 있습니다.

1. 사용.browserHistory.push("/path")

   import { browserHistory } from 'react-router';
   //do something...
   browserHistory.push("/path");
   

2. 사용.this.context.router.push("/path")

   class Foo extends React.Component {
       constructor(props, context) {
           super(props, context);
           //do something...
       }
       redirect() {
           this.context.router.push("/path")
       }
   }
   
   Foo.contextTypes = {
       router: React.PropTypes.object
   }
   

3. 리액트 라우터 v4에는this.context.history.push("/path")그리고.this.props.history.push("/path").세부사항:리액트 라우터 v4에서 이력 푸시 방법

이 옵션들 때문에 너무 혼란스러워요. 페이지를 리디렉션하는 가장 좋은 방법이 있을까요?

실제로 사용 사례에 따라 다릅니다.

1) 부정 사용자로부터 루트를 보호하고 싶다.

이 경우라는 컴포넌트를 사용할 수 있습니다.<Redirect />는 다음 로직을 구현할 수 있습니다.

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

만약 당신이 원한다면<Redirect />원하는 대로 작동하려면 컴포넌트의 렌더링 메서드 안에 배치하여 최종적으로 DOM 요소로 간주해야 합니다.그렇지 않으면 동작하지 않습니다.

2) 특정 액션 후에 리다이렉트 하는 경우(예를 들어 아이템 작성 후)

이 경우 이력을 사용할 수 있습니다.

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

또는

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

이력에 액세스하기 위해 컴포넌트를 HOC로 랩할 수 있습니다.withRouter컴포넌트를 포장하면 통과합니다.match location그리고.history소품. 자세한 내용은 With Router 공식 문서를 참조하십시오.

컴포넌트가 의 자식인 경우<Route />컴포넌트, 예를 들어 다음과 같은 경우<Route path='/path' component={myComponent} />컴포넌트를 로 감싸지 않아도 됩니다.withRouter,왜냐면<Route />패스match,location,그리고.history그 자식에게.

3) 일부 요소를 클릭한 후 리다이렉트합니다.

여기에는 두 가지 옵션이 있습니다.사용할 수 있습니다.history.push()그것을 에 전달함으로써onClick이벤트:

<div onClick={this.props.history.push('/path')}> some stuff </div>

또는 를 사용할 수 있습니다.<Link />컴포넌트:

 <Link to='/path' > some stuff </Link>

이 케이스의 경험적 원칙은 이 케이스를 사용하여<Link />첫째, 특히 성능 때문인 것 같아요.

react router dom 라이브러리 useHistory를 사용할 수도 있습니다.

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

https://reactrouter.com/web/api/Hooks/usehistory

리액트 라우터를 사용하여v15.1그 이후로는useHistory후크, 이건 아주 간단하고 명확한 방법이야.다음은 소스 블로그의 간단한 예입니다.

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

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

이 기능은 모든 기능 컴포넌트 및 커스텀훅 내에서 사용할 수 있습니다.네, 이것은 다른 훅과 같은 클래스 컴포넌트에서는 동작하지 않습니다.

자세한 내용은 https://reacttraining.com/blog/react-router-v5-1/ #usehistory를 참조하십시오.

,Redirect의 범위 내에서Route다음과 같이 합니다.유효하지 않은 경로를 처리하기 위한 것입니다.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>

가장 간단한 방법 중 하나: 다음과 같이 링크를 사용합니다.

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

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

전체 div 섹션을 링크로 포함하는 경우:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

언급URL : https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router