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

React-Router가이 지원을 제공한다고 생각하지 않습니다. 문서는 언급

<Redirect>는 이전 URL을 유지하기 위해 애플리케이션의 다른 경로로 리디렉션을 설정 합니다.

대신 React-Redirect 와 같은 것을 사용해 볼 수 있습니다.

Alan의 대답을 확장하려면 'http :'또는 'https :'를 포함하는 "to"속성이있는 <Route/>모든 <Link/>'을 올바른 외부 리소스로 리디렉션하는를 만들 수 있습니다 .

아래는 <Router>.

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

V3의 경우, V4에서 작동 할 수 있습니다. Eric의 대답에서 벗어나 URL에 'http'가없는 지역 개발을 처리하는 것과 같이 조금 더해야했습니다. 또한 동일한 서버의 다른 응용 프로그램으로 리디렉션하고 있습니다.

라우터 파일에 추가 :

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

그리고 구성 요소 :

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.host.startsWith("http") ? "" : "http://";
    //using host here, as I'm redirecting to another location on the same host
    this.target = prefix + window.location.host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;

Typescript와 함께 React를 사용하면 함수가 void. 그래서 저는 Route render 메서드를 사용하고 React router v4를 사용하여 이렇게했습니다.

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

대신도 사용할 수있는 경우 window.location.assign(), window.location.replace()등

서버 측 렌더링을 사용하는 경우 StaticRouter. contextas를 사용하여 앱에 구성 요소 props를 추가 <Redirect path="/somewhere" />하십시오. 아이디어는 react-router가 리디렉션 구성 요소와 일치 할 때마다 정적 라우터에 전달한 컨텍스트에 무언가를 추가하여 경로가 리디렉션 구성 요소와 일치 함을 알려줍니다. 이제 리디렉션에 도달했음을 알게되었으므로 찾고있는 리디렉션인지 확인해야합니다. 그런 다음 서버를 통해 리디렉션하십시오. ctx.redirect('https://example/com').

다음을 사용하여 react-router-dom에서 리디렉션을 수행 할 수있었습니다.

<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />

제 경우에는 사용자가 루트 URL http://myapp.com을 방문 할 때마다 앱 내의 다른 곳 으로 리디렉션하는 방법을 찾고있었습니다 http://myapp.com/newplace. 그래서 위의 도움이되었습니다.