javascript - React-Router Extern länk

Eftersom jag använder React Router för att hantera mina rutter i en React-app, är jag nyfiken på om det finns ett sätt att omdirigera till en extern resurs.

Säg att någon slår:

example.com/privacy-policy

Jag skulle vilja att det omdirigerar till:

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

Jag hittar exakt noll hjälp med att undvika att skriva det i vanlig JavaScript i min index.html när den laddas med något som:

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

Svar #1

Här är en enradare för att använda React Router för att omdirigera till en extern länk:

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

Den använder React pure component-konceptet för att minska komponentens kod till en enda funktion som, istället för att rendera något, omdirigerar webbläsaren till en extern URL.

Det fungerar både på React Router 3 och 4.

Svar #2

Med Link-komponenten från react-router kan du göra det. I "to"-egenskapen kan du specificera 3 typer av data:

  • en sträng: En strängrepresentation av länkplatsen, skapad genom att sammanfoga platsens pathname-, search- och hash-egenskaper.

  • ett objekt: Ett objekt som kan ha någon av följande egenskaper:

    • pathname: En sträng som representerar sökvägen att länka till.
    • search: En strängrepresentation av frågeparametrar.
    • hash: En hash att sätta i URL:en, t.ex. #en-hash.
    • state: Status att spara till platsen.
  • en funktion: En funktion till vilken den nuvarande platsen skickas som ett argument och som ska returnera platsrepresentation som en sträng eller som ett objekt

För ditt exempel (extern länk):

https://example.zendesk.com/hc/sv/articles/123456789-Integritetspolicyer

Du kan göra följande:

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

Du kan också skicka med props som du vill ska finnas på , såsom en titel, id, className, osv.

Svar #3

Det finns inget behov av att använda <Link />-komponenten från React Router.

Om du vill gå till en extern länk, använd en ankartagg.

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

Använd länkattributen rel= ”noopener” eller rel= ”noreferrer” för varje länk. Länkattributet rel= ”noreferrer” fungerar också på samma sätt som länkattributet “noopener” genom att det förhindrar att den länkade sidan tar kontroll över den länkande sidan.

Svar #4

Det behöver inte begära React Router. Denna åtgärd kan göras nativt och den tillhandahålls av webbläsaren.

Använd bara window.location.

Med React Hooks

const RedirectPage = () => {
  React.useEffect(() => {
    window.location.replace('https://www.google.com')
  }, [])
}

Med React-klasskomponent

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

Om du också vill öppna det i en ny flik:

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

Svar #5

Jag slutade faktiskt med att bygga min egen komponent, <Redirect>. Den hämtar information från react-router-elementet, så jag kan behålla den i mina rutter. Som:

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

Här är min komponent om någon är nyfiken:

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;

Notera: Detta är med react-router: 3.0.5, det är inte så enkelt i 4.x

Relaterade artiklar