প্রতিক্রিয়া-রাউটার বাহ্যিক লিঙ্ক

Question 1

যেহেতু আমি প্রতিক্রিয়া অ্যাপটিতে আমার রুটগুলি পরিচালনা করতে প্রতিক্রিয়া-রাউটার ব্যবহার করছি, তাই বাহ্যিক উত্সে পুনর্নির্দেশের কোনও উপায় থাকলে আমি আগ্রহী।

বলুন কেউ আঘাত করেছে:

example.com/privacy-policy

আমি এটিতে পুনর্নির্দেশ করতে চাই:

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

আমি আমার সূচক html এ প্লেইন জেএস-এ এটি লেখার বিষয়টি এড়াতে ঠিক শূন্যের সাহায্য পাচ্ছি যেমন:

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

Question 2

বাহ্যিক লিঙ্কে পুনঃনির্দেশ করতে প্রতিক্রিয়া রাউটার ব্যবহার করার জন্য এখানে একটি ওয়ান-লাইনার রয়েছে:

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

এটি উপাদানটির কোডটিকে একক ফাংশনে হ্রাস করতে শুদ্ধ উপাদান ধারণাটি ব্যবহার করে যা কোনও কিছু রেন্ডারিংয়ের পরিবর্তে ব্রাউজারটিকে একটি বাহ্যিক URL এ পুনঃনির্দেশ করে।

প্রতিক্রিয়া রাউটার 3 এবং 4 এ উভয়ই কাজ করে।

Question 3

<Link />প্রতিক্রিয়া-রাউটার থেকে উপাদান ব্যবহার করার দরকার নেই ।

আপনি যদি বাহ্যিক লিঙ্কে যেতে চান তবে অ্যাঙ্কর ট্যাগ ব্যবহার করুন।

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

Question 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.5, এটি 4.x এ এত সহজ নয়

Question 5

এটির প্রতিক্রিয়া রাউটারের অনুরোধ করার দরকার নেই। এই ক্রিয়াটি স্থানীয়ভাবে করা যেতে পারে এবং এটি ব্রাউজার দ্বারা সরবরাহ করা হয়।

শুধু ব্যবহার window.location

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

এছাড়াও, আপনি যদি এটি একটি নতুন ট্যাবে খুলতে চান:

window.open('https://www.google.com', '_blank');

Question 6

প্রতিক্রিয়া-রাউটারের লিঙ্ক উপাদান সহ আপনি এটি করতে পারেন। " টু " প্রপসে আপনি 3 ধরণের ডেটা নির্দিষ্ট করতে পারবেন:

একটি স্ট্রিং : লিংকের অবস্থানের একটি স্ট্রিং প্রতিনিধিত্ব, অবস্থানের পথের নাম, অনুসন্ধান এবং হ্যাশ বৈশিষ্ট্যগুলিকে একত্রে তৈরি করে।
একটি অবজেক্ট : এমন একটি বস্তু যার মধ্যে নিম্নলিখিত বৈশিষ্ট্যগুলি থাকতে পারে:
- পথের নাম : একটি স্ট্রিং যা লিঙ্কের পথে প্রতিনিধিত্ব করে।
- অনুসন্ধান : ক্যোয়ারী প্যারামিটারগুলির একটি স্ট্রিং প্রতিনিধিত্ব।
- হ্যাশ : ইউআরএল রাখতে একটি হ্যাশ, যেমন # এ-হ্যাশ।
- অবস্থা : অবস্থান স্থির রাখতে ।
একটি ফাংশন : এমন একটি ফাংশন যাতে বর্তমান অবস্থানটি একটি আর্গুমেন্ট হিসাবে পাস করা হয় এবং যা কোনও স্ট্রিং বা অবজেক্ট হিসাবে অবস্থানের প্রতিনিধিত্ব করে return

আপনার উদাহরণের জন্য (বাহ্যিক লিঙ্ক):

https://example.zendesk.com/hc/en-us/articles/123456789- গোপনীয়তা- নীতিগুলি

আপনি নিম্নলিখিতটি করতে পারেন:

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

আপনি যেমন হতে চান এমন প্রপসগুলিও পাস করতে পারেন যেমন শিরোনাম, আইডি, ক্লাসনেম ইত্যাদি on

Question 7

এখানে কিছু তথ্য ব্যবহার করে, আমি নিম্নলিখিত উপাদানটি নিয়ে এসেছি যা আপনি আপনার রুট ঘোষণার মধ্যে ব্যবহার করতে পারেন। এটি প্রতিক্রিয়া রাউটার ভি 4 এর সাথে সামঞ্জস্যপূর্ণ।

এটি টাইপ স্ক্রিপ্ট ব্যবহার করছে, তবে দেশীয় জাভাস্ক্রিপ্টে রূপান্তর করতে মোটামুটি সোজা-ফরোয়ার্ড হওয়া উচিত:

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

Question 8

এর সাথে আমার ভাগ্য হয়েছিল:

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

Question 9

আমি মনে করি না প্রতিক্রিয়া-রাউটার এই সমর্থন সরবরাহ করে। ডকুমেন্টেশন উল্লেখ

একটি <পুনর্নির্দেশ> পুরানো ইউআরএল বজায় রাখতে আপনার অ্যাপ্লিকেশনটিতে অন্য একটি রুটে পুনর্নির্দেশ সেট আপ করে ।

আপনি এর পরিবর্তে প্রতিক্রিয়া-পুনর্নির্দেশের মতো কিছু ব্যবহার করার চেষ্টা করতে পারেন

Question 10

অ্যালানের উত্তরে প্রসারিত করতে আপনি এমন একটি তৈরি করতে পারেন <Route/>যা সমস্তকে পুনর্নির্দেশ করে<Link/> 'বাহ্যিক উত্সকে' HTTP: 'বা' https: 'যুক্ত বৈশিষ্ট্যগুলির সাথে "এর" সাথে করে।

নীচে এটির একটি কার্যকারী উদাহরণ যা সরাসরি আপনার মধ্যে স্থাপন করা যেতে পারে <Router>।

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

Question 11

ভি 3 এর জন্য, যদিও এটি ভি 4 এর জন্য কাজ করতে পারে। এরিকের উত্তর থেকে দূরে গিয়ে, আমাকে আরও কিছু করা দরকার যেমন স্থানীয় বিকাশ হ্যান্ডল করার মতো যেখানে 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;

Question 12

টাইপস্ক্রিপ্ট সহ প্রতিক্রিয়া ব্যবহার করে আপনি একটি ত্রুটি পান কারণ ফাংশনটি অবশ্যই একটি প্রতিক্রিয়া উপাদান ফেরত দেয়, না void। সুতরাং আমি এটি রুট রেন্ডার পদ্ধতিটি ব্যবহার করে করেছি (এবং প্রতিক্রিয়া রাউটার ভি 4 ব্যবহার করে):

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

যেখানে আপনি পরিবর্তে এছাড়াও ব্যবহার করতে পারেন window.location.assign(), window.location.replace()ইত্যাদি

Question 13

আপনি যদি সার্ভার সাইড রেন্ডিং ব্যবহার করেন তবে আপনি ব্যবহার করতে পারেন StaticRouter। আপনার contextহিসাবে propsএবং তারপরে <Redirect path="/somewhere" />আপনার অ্যাপ্লিকেশনে উপাদান যুক্ত করার সাথে । প্রতিটি সময়ে প্রতিক্রিয়া-রাউটারটি একটি পুনর্নির্দেশ উপাদানটির সাথে মেলে এটি ধারণাটি স্ট্যাটিক রাউটারে আপনি যে প্রসঙ্গে চলেছেন তাতে কিছু যুক্ত হবে যাতে আপনাকে জানাতে পারে যে আপনার পথটি একটি পুনঃনির্দেশ উপাদানটির সাথে মেলে। এখন যেহেতু আপনি জানেন যে আপনি একটি পুনর্নির্দেশকে আঘাত করেছেন আপনার কেবল যাচাই করা উচিত যে আপনার পুনর্নির্দেশের সন্ধান করছেন ts তারপরে সার্ভারের মাধ্যমে কেবল পুনর্নির্দেশ করুন। ctx.redirect('https://example/com')।

Question 14

নিম্নলিখিতগুলি ব্যবহার করে আমি প্রতিক্রিয়া-রাউটার-ডোমে একটি পুনর্নির্দেশ অর্জন করতে সক্ষম হয়েছি

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

আমার ক্ষেত্রে, আমি যখনই ব্যবহারকারীদের http://myapp.comঅ্যাপ্লিকেশনটির মধ্যে অন্য কোনও জায়গায় রুট ইউআরএল পরিদর্শন করি তখন আমি পুনঃনির্দেশের একটি উপায় খুঁজছিলাম http://myapp.com/newplace। সুতরাং উপরের সাহায্য করেছে।