[javascript] React-Router 외부 링크

react-router를 사용하여 반응 앱에서 내 경로를 처리하고 있기 때문에 외부 리소스로 리디렉션하는 방법이 있는지 궁금합니다.

누군가가 맞았다 고 말하십시오.

example.com/privacy-policy

다음으로 리디렉션하고 싶습니다.

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

내 index.html에서 일반 JS로 작성하는 것을 피하는 데 정확히 도움이되지 않습니다.

if ( window.location.path === "privacy-policy" ){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

답변

다음은 React Router를 사용하여 외부 링크로 리디렉션하는 한 줄입니다.

<Route path='/privacy-policy' component={() => {
     window.location.href = 'https://example.com/1234';
     return null;
}}/>

React 순수한 구성 요소 개념을 사용하여 구성 요소의 코드를 렌더링하는 대신 브라우저를 외부 URL로 리디렉션하는 단일 함수로 줄입니다.

React Router 3과 4에서 모두 작동합니다.

답변

<Link />react-router의 구성 요소 를 사용할 필요가 없습니다 .

외부 링크로 이동하려면 앵커 태그를 사용하십시오.

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

답변

나는 실제로 내 자신의 구성 요소를 구축했습니다. 요소 <Redirect>
에서 정보를 가져와 react-router내 경로에 보관할 수 있습니다. 예 :

<Route
  path="/privacy-policy"
  component={ Redirect }
  loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
  />

다음은 내 구성 요소입니다.

import React, { Component } from "react";

export class Redirect extends Component {
  constructor( props ){
    super();
    this.state = { ...props };
  }
  componentWillMount(){
    window.location = this.state.route.loc;
  }
  render(){
    return (<section>Redirecting...</section>);
  }
}

export default Redirect;

편집-참고 : 이것은 react-router: 3.0.54.x에서 그렇게 간단하지 않습니다.

답변

반응 라우터를 요청할 필요가 없습니다. 이 작업은 기본적으로 수행 할 수 있으며 브라우저에서 제공합니다.

그냥 사용 window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('http://www.google.com')
  }
}

답변

react-router의 Link 구성 요소를 사용하면 그렇게 할 수 있습니다. ” to “prop에서 3 가지 유형의 데이터를 지정할 수 있습니다.

a string : 위치의 경로 이름, 검색 및 해시 속성을 연결하여 만든 링크 위치의 문자열 표현입니다.
an object : 다음 속성 중 하나를 가질 수있는 개체입니다.
- pathname : 연결할 경로를 나타내는 문자열입니다.
- search : 쿼리 매개 변수의 문자열 표현입니다.
- hash : URL에 넣을 해시, 예 : # a-hash.
- state : 위치에 유지할 상태 입니다.
a function : 현재 위치가 인수로 전달되고 위치 표현을 문자열 또는 객체로 반환해야하는 함수

예를 들어 (외부 링크) :

https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

다음을 수행 할 수 있습니다.

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

제목, ID, 클래스 이름 등과 같이 원하는 소품을 전달할 수도 있습니다.

답변

여기에있는 정보 중 일부를 사용하여 경로 선언 내에서 사용할 수있는 다음 구성 요소를 생각해 냈습니다. React Router v4와 호환됩니다.

typescript를 사용하고 있지만 네이티브 자바 스크립트로 변환하는 것은 매우 간단합니다.

interface Props {
  exact?: boolean;
  link: string;
  path: string;
  sensitive?: boolean;
  strict?: boolean;
}

const ExternalRedirect: React.FC<Props> = (props: Props) => {
  const { link, ...routeProps } = props;

  return (
    <Route
      {...routeProps}
      render={() => {
        window.location.replace(props.link);
        return null;
      }}
    />
  );
};

다음과 함께 사용 :

<ExternalRedirect
  exact={true}
  path={'/privacy-policy'}
  link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}
/>

답변

나는 이것으로 운이 좋았다.

  <Route
    path="/example"
    component={() => {
    global.window && (global.window.location.href = 'https://example.com');
    return null;
    }}
/>