React-Router 외부 링크

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에서 모두 작동합니다.

---

나는 실제로 내 자신의 구성 요소를 구축했습니다. 요소 <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에서 그렇게 간단하지 않습니다.

---

<Link />react-router의 컴포넌트 를 사용할 필요가 없습니다 .

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

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

---

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

그냥 사용 window.location

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

---

여기에있는 정보 중 일부를 사용하여 경로 선언 내에서 사용할 수있는 다음 구성 요소를 생각해 냈습니다. 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'}
/>

---

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

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

You could try using something like React-Redirect instead

---

FOR V3, although it may work for V4. Going off of Relic's answer, I needed to do a little more, like handle local development where 'http' is not present on the url. I'm also redirecting to another application on the same server.

Added to router file:

import RedirectOnServer from './components/RedirectOnServer';

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

And the Component:

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;

---

To expand on Alan's answer, you can create a <Route/> that redirects all <Link/>'s with "to" attributes containing 'http:' or 'https:' to the correct external resource.

Below is a working example of this which can be placed directly into your <Router>.

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

---

Using React with Typescript you get an error as the function must return a react element, not void. So I did it this way using the Route render method (and using React router v4):

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

Where you could instead also use window.location.assign(), window.location.replace() etc

---

If you are using server side rending, you can use StaticRouter. With your context as props and then adding <Redirect path="/somewhere" /> component in your app. The idea is everytime react-router matches a redirect component it will add something into the context you passed into the static router to let you know your path matches a redirect component. now that you know you hit a redirect you just need to check if thats the redirect you are looking for. then just redirect through the server. ctx.redirect('https://example/com').

---

I was able to achieve a redirect in react-router-dom using the following

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

For my case, I was looking for a way to redirect users whenever they visit the root URL http://myapp.com to somewhere else within the app http://myapp.com/newplace. so the above helped.

참고URL : https://stackoverflow.com/questions/42914666/react-router-external-link