javascript - रिएक्ट-राउटर बाहरी लिंक




reactjs redirect (7)

चूंकि मैं रिएक्शन ऐप में अपने मार्गों को संभालने के लिए रिएक्ट-राउटर का उपयोग कर रहा हूं, अगर किसी बाहरी संसाधन पर रीडायरेक्ट करने का कोई तरीका है तो मैं उत्सुक हूं।

कहो कोई हिट:

example.com/privacy-policy

मैं इसे पुनर्निर्देशित करना चाहूंगा:

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

मैं अपने जेनेरिक लोडिंग में सादे JS में इसे लिखने से बचने में बिल्कुल शून्य मदद पा रहा हूँ।

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

V3 के लिए, हालांकि यह V4 के लिए काम कर सकता है। रेलिक के उत्तर से हटकर, मुझे कुछ और करने की ज़रूरत थी, जैसे स्थानीय विकास को संभालना जहाँ 'http' url पर मौजूद नहीं है। मैं उसी सर्वर पर किसी अन्य एप्लिकेशन पर भी रीडायरेक्ट कर रहा हूं।

राउटर फ़ाइल में जोड़ा गया:

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;

इसे राउटर के प्रतिक्रिया का अनुरोध करने की आवश्यकता नहीं है। यह कार्रवाई मूल रूप से की जा सकती है और यह ब्राउज़र द्वारा प्रदान की जाती है।

बस window.location उपयोग करें

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

प्रतिक्रिया-राउटर से <Link /> घटक का उपयोग करने की कोई आवश्यकता नहीं है।

यदि आप बाहरी लिंक पर जाना चाहते हैं तो एंकर टैग का उपयोग करें।

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

बाहरी लिंक पर पुनर्निर्देशित करने के लिए रिएक्ट राउटर का उपयोग करने के लिए यहां एक-लाइनर है:

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

यह एक एकल फ़ंक्शन के घटक कोड को कम करने के लिए रिएक्ट शुद्ध घटक अवधारणा का उपयोग करता है, जो किसी भी चीज़ को रेंडर करने के बजाय किसी बाहरी URL पर पुनर्निर्देशित करता है।

रिएक्ट राउटर 3 और 4 दोनों पर काम करता है।


मैं निम्नलिखित का उपयोग करके प्रतिक्रिया-राउटर-डोम में एक रीडायरेक्ट प्राप्त करने में सक्षम था

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

मेरे मामले के लिए, मैं उपयोगकर्ताओं को पुनर्निर्देशित करने के लिए एक रास्ता खोज रहा था जब भी वे रूट http://myapp.com http://myapp.com/newplace एप्लिकेशन के भीतर कहीं और रूट URL http://myapp.com पर http://myapp.com/newplace । इसलिए ऊपर वाले ने मदद की।


मैं वास्तव में अपने खुद के घटक के निर्माण को समाप्त कर दिया। <Redirect> यह react-router तत्व से जानकारी लेता है ताकि मैं इसे अपने मार्गों में रख सकूं। जैसे कि:

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

यहाँ मेरा घटक incase है-किसी को भी उत्सुक है:

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;

EDIT - NOTE: यह react-router: 3.0.5 , यह 4.x में इतना सरल नहीं है


यहाँ कुछ जानकारी का उपयोग करते हुए, मैं निम्नलिखित घटक के साथ आया, जिसका उपयोग आप अपने मार्ग घोषणाओं में कर सकते हैं। यह रिएक्ट राउटर v4 के साथ संगत है।

यह टाइपस्क्रिप्ट का उपयोग कर रहा है, लेकिन देशी जावास्क्रिप्ट में बदलने के लिए काफी सीधा-सीधा होना चाहिए:

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-redux