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




reactjs redirect (8)

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

कहो कोई हिट:

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"
}

मैं वास्तव में अपने खुद के घटक के निर्माण को समाप्त कर दिया। <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 में इतना सरल नहीं है


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

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

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

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


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

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

<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')
  }
}

टाइपस्क्रिप्ट के साथ प्रतिक्रिया का उपयोग करने से आपको एक त्रुटि मिलती है क्योंकि फ़ंक्शन को एक प्रतिक्रिया तत्व वापस करना होगा, void नहीं। इसलिए मैंने इसे रूट रेंडर विधि का उपयोग करके (और रिएक्टर राउटर v4 का उपयोग करके) किया:

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

जहाँ आप इसके बजाय window.location.assign() , window.location.replace() आदि का उपयोग कर सकते हैं


यहाँ कुछ जानकारी का उपयोग करते हुए, मैं निम्नलिखित घटक के साथ आया, जिसका उपयोग आप अपने मार्ग घोषणाओं में कर सकते हैं। यह रिएक्ट राउटर 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'}
/>

मुझे नहीं लगता कि रिएक्ट-राउटर यह समर्थन प्रदान करता है। documentation का उल्लेख है

पुराने URL को बनाए रखने के लिए आपके एप्लिकेशन में एक <redirect> दूसरे रूट पर रीडायरेक्ट सेट करता है।

आप इसके बदले React-Redirect जैसी किसी चीज़ का उपयोग करने का प्रयास कर सकते हैं


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;






react-router-redux