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

Question

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

कहो कोई हिट:

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

Comments

आप किस रिएक्टर राउटर का उपयोग कर रहे हैं?

— टायलर मैकगिनिस

मैं संस्करण 3.x

— Eric Hodonsky

बस window.location.hrefएक औपचारिक पुनर्निर्देशन बदलने के लिए।

— अमीरहोसिन मेहरवारजी 19

@AmirhosseinMehrvarzi कि वास्तव में कुछ भी मतलब नहीं है। क्या आप अधिक विशिष्ट हो सकते हैं या एक उदाहरण दे सकते हैं? इसके अलावा, मुझे यकीन नहीं है कि आपने गौर किया है, लेकिन इस प्रश्न में पहले से ही एक प्रतिक्रिया है जो प्रतिक्रिया और प्रतिक्रिया रूटर के साथ काम करती है जो कि सवाल था।

— एरिक होडोंस्की 15

@Relic आपको अपने ifl में अपने url के रूप में उपयोग करने की आवश्यकता है। मुझे कुछ दिनों पहले ऐसी ही समस्या हुई थी और इस तरह से सरल और प्रभावी लगा। यह तुरंत पुनर्निर्देशित करता है। स्वीकृत उत्तर एक रूटिंग समाधान है (हालांकि यह रूट सिद्धांतों का उल्लंघन करता है, यह देखते हुए कि रूट आर्किटेक्चर ऐप के अंदर नेविगेशन के लिए है बाहर नहीं) जो मेरे जैसे किसी भी पर्यावरण के लिए काम नहीं करता है

— अमीरहोसिन मेहरवार्जी

Answer 1

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

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

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

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

Comments

यह काम करता है लेकिन मैं एक और अधिक सुंदर मापनीय समाधान की तलाश में था। देखें कि मैं क्या लेकर आया था क्योंकि इसने मुझे MobileApps आदि के लिए रीडायरेक्ट के साथ और भी आगे जाने की अनुमति दी (Not ReactNative, सही मायने में नेटिव ऐप्स)। अब मैं जो कर रहा हूं वह मेरी समस्या को हल करने का सही तरीका नहीं है, लेकिन इस समस्या को हल करने के लिए मैं आपको अपने समाधान की जांच करने का सुझाव देता हूं और साथ ही साथ एक अलग दृष्टिकोण के अलावा और कुछ नहीं।

— एरिक होडोंस्की

यह वास्तव में मेरे दिमाग में साफ नहीं है। मैं ईमानदारी से एक एंकर टैग का उपयोग करूंगा। दूसरा, ब्राउज़र पर बैक बटन दबाकर आपको वह मार्ग देता है जो फिर उदाहरण के

— जोनाथन Rys

बेहतर बैक बटन व्यवहार के लिए (अपने आवेदन के लिए सत्यापित करें), window.location.replace (' example.com' ) का उपयोग करें

— मैट जूल

कोई भी उत्तर नहीं देता है, मूल पोस्ट केवल क्लाइंट रीडायरेक्ट के बारे में पूछ रहा था, जिसे पता चल रहा है कि कोई 301 या 302 प्रकार का सही रीडायरेक्ट समर्थन नहीं है।

— एरिक होडोंस्की

Answer 2

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

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

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

Comments

ओपी पूछ रहा था कि इसे प्रोग्रामिक रूप से कैसे किया जाए, घोषित रूप से नहीं

— एरिक होडोंस्की

असंबंधित और भ्रामक उत्तर।

— प्रिया रंजन सिंह

आप इस का उपयोग करते हैं, को जोड़ने rel="noopener noreferrer"के लिए<a>

— एस ..

अच्छा जवाब, जब तक वे इसे प्राप्त नहीं करेंगे, तब तक हर कोई परवाह नहीं करेगा।

— फ्रैंकबाइट.कॉम

Answer 3

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

संपादित करें - नोट: यह react-router: 3.0.54.x में इतना सरल नहीं है

Comments

आपको कुछ भी करने की जरूरत नहीं है, प्रतिक्रिया एक ढांचा है, और एक रूपरेखा में बहुत अधिक मूल्य है। यह कैसे प्रतिक्रिया ढांचे के भीतर यह करने के लिए है। हालाँकि यह उस ब्राउज़र इतिहास मॉड्यूल को ध्यान में नहीं रखता है जिसे यहाँ लपेटा जा सकता है, जिससे यह और भी उपयोगी हो जाता है। कृपया यह भी ध्यान दें कि "window.location" कैसा है यह 1999 में किया गया था। यह क्लाइंट साइड रूटिंग के लिए अपने रूट टेबल में जोड़ने का एक तरीका है। यह "अच्छा" समाधान नहीं है।

— एरिक होडोंस्की

प्रतिक्रिया में-v4 आप घटक के बजाय रेंडर का उपयोग कर सकते हैं

— इर्रच

@Irrech "घटक के बजाय रेंडर" का अर्थ कुछ भी नहीं है। यदि आपके पास प्रश्न का उत्तर है, तो कृपया इसे जोड़ें और कुछ विस्तार दें कि आप कैसे लागू करेंगे।

— एरिक होडोंस्की

@MuhammadUmer या आप सिर्फ एक एंकर टैग का उपयोग करें। प्रतिक्रिया-राउटर आपके एप्लिकेशन के भीतर रूटिंग के लिए बहुत सख्ती से है। आपको लगता है कि डिजाइन निर्णय (मुझे पता है से असहमत कर सकते हैं मैं करते हैं), लेकिन ऐसा नहीं "1999 में बेहतर किया" है, यह सिर्फ एक ही किया है।

— १।

Answer 4

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

महज प्रयोग करें window.location

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

Comments

यह उत्तर अधूरा है, अमूर्तता की अनुमति नहीं देता है या यह राउटर से संबंधित है

— एरिक होडोंस्की

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

— एलन

Answer 5

प्रतिक्रिया-राउटर के लिंक घटक के साथ आप ऐसा कर सकते हैं। में " करने के लिए सहारा" आप डेटा के 3 प्रकार निर्दिष्ट कर सकते हैं:

• एक स्ट्रिंग : लिंक के स्थान का एक स्ट्रिंग प्रतिनिधित्व, स्थान के पथनाम, खोज और हैश गुणों को समाहित करके बनाया गया है।
• एक ऑब्जेक्ट : एक ऑब्जेक्ट जिसमें निम्न गुण हो सकते हैं:
  • pathname : लिंक करने के लिए पथ का प्रतिनिधित्व करने वाला एक स्ट्रिंग।
  • खोज : क्वेरी मापदंडों का एक स्ट्रिंग प्रतिनिधित्व।
  • हैश : यूआरएल में डालने के लिए एक हैश, जैसे # ए-हैश।
  • स्थिति : स्थिति के लिए बने रहने के लिए राज्य।
• एक फ़ंक्शन : एक फ़ंक्शन जिसे वर्तमान स्थान को एक तर्क के रूप में पारित किया जाता है और जिसे स्ट्रिंग या एक ऑब्जेक्ट के रूप में स्थान प्रतिनिधित्व वापस करना चाहिए

आपके उदाहरण के लिए (बाहरी लिंक):

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

आप उन प्रॉप्स को भी पास कर सकते हैं, जो आप जैसे शीर्षक, आईडी, क्लासनेम, आदि पर होना चाहते हैं।

Comments

यह सबसे सरल उपाय है और अच्छी तरह से काम करता है।

— hPNJ7MHTyg

Answer 6

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

Answer 7

मुझे इसका सौभाग्य मिला:

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

Answer 8

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

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

आप इसके बदले रिएक्ट-रीडायरेक्ट जैसी किसी चीज़ का उपयोग करके देख सकते हैं

Answer 9

एलन के उत्तर पर विस्तार करने के लिए, आप सही बाहरी संसाधन के लिए "http: 'या' https: 'युक्त" के साथ " <Route/>सभी को पुनर्निर्देशित कर सकते हैं <Link/>।

नीचे इसका एक कार्यशील उदाहरण दिया गया है, जिसे सीधे अपने में रखा जा सकता है <Router>।

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

Answer 10

V3 के लिए, हालांकि यह V4 के लिए काम कर सकता है। एरिक के जवाब से हटकर, मुझे कुछ और करने की ज़रूरत थी, जैसे स्थानीय विकास को संभालना जहां यूआरएल पर '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;

Answer 11

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

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

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

Answer 12

यदि आप सर्वर साइड रेंडिंग का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं StaticRouter। आपके साथ contextके रूप में propsऔर फिर जोड़ने <Redirect path="/somewhere" />अपने अनुप्रयोग में घटक। यह विचार है कि हर प्रतिक्रिया-राउटर एक पुनर्निर्देशित घटक से मेल खाता है, यह आपके द्वारा स्थैतिक राउटर में पारित किए गए संदर्भ में कुछ जोड़ देगा ताकि आपको पता चल सके कि आपका पथ एक रीडायरेक्ट घटक से मेल खाता है। अब जब आप जानते हैं कि आपने एक रीडायरेक्ट मारा है, तो आपको यह जांचना होगा कि क्या आप जिस रीडायरेक्ट की तलाश कर रहे हैं, वह है। फिर सर्वर के माध्यम से पुनर्निर्देशित करें। ctx.redirect('https://example/com')।

Comments

मैं इसे क्लाइंट में करने का तरीका पूछ रहा हूं। यह वास्तव में DNS स्तर पर किया जाना चाहिए यदि सही ढंग से किया गया हो। दूसरा प्रारंभिक सर्वर अनुरोध में होगा। जब से मैं S3 पर होस्ट कर रहा हूं, सर्वर-साइड नहीं है। तो मैं अब के लिए फंस गया हूँ जब तक हमारे देव- ops आदमी सेवा स्तर पर अनुप्रेषित कर सकता है।

— एरिक होडोंस्की

आप क्या कर सकते हैं,<Redirect push={ true } to="/pathtoredirect" />

— री

Answer 13

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

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

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

Comments

ओपी स्पष्ट रूप से कहता है कि वह एक बाहरी संसाधन को पुनर्निर्देशित करने की कोशिश कर रहा है, उसी ऐप के अंदर एक मार्ग पर नहीं।

— नेट्स

स्पष्ट रूप से, मैं अपने उपयोग के मामले के बारे में विशिष्ट था और गिरा दिया कि अगर वह इसे अपने लिए लागू कर सकता है। मेरा समाधान मेरे ऐप के भीतर कहता है, वह उदाहरण के रूप में इसका उपयोग कर सकता है।

— Walecloud

यदि आप लोगों को अपना उपयोग मामला दिखाना चाहते हैं, तो कृपया इसके बारे में एक ब्लॉग लिखें। Stackoverflow उस क्वेरी का उत्तर देने के लिए है जो लोगों के पास है, आपके उपयोग-मामले में नहीं। इसके अलावा, आपके उपयोग के मामले को लागू करने के लिए सही तरीका है - <= से = पर रीडायरेक्ट करें "/" {{पथ नाम: '/ YourRoute'}} />

— Abhas