Získejte data z adresy URL do aplikace React pomocí React Router

Při pokusu naučit se parametry adresy URL React Router jsem měl problém najít čisté příklady bez ozdůbek. Nyní, když tomu rozumím lépe, uvádím zde prostý, smrtelně jednoduchý příklad, abych pomohl ostatním.

Koncový produkt

Ukážu vám, jak vytvořit web, který vezme 3 parametry z adresy URL a předá je do komponenty React, aby se zobrazil na obrazovce.

Předpoklady

• Základní znalosti o budování pomocí React
• Projekt React s nainstalovaným React-router-dom (Create React App je skvělý nástroj pro spuštění aplikace React)

Kód

Toto je úplný soubor index.js a v podstatě vše, co potřebujete k nastavení webu (viz úplné úložiště zde):

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
const AppRouter = () => (
  <BrowserRouter>
    <Route
      path='/:parameter1/:parameter2/:parameter3'
      render={props => <App {...props} />}
    />
  </BrowserRouter>
);
const App = props => {
  const { parameter1, parameter2, parameter3 } = props.match.params;
  return (
    <div>
      First: {parameter1} <br />
      Second: {parameter2} <br />
      Third: {parameter3} <br />
    </div>
  );
};
ReactDOM.render(<AppRouter />, document.getElementById('root'));

Co se zde děje?

V podstatě zabalíme celou aplikaci do <BrowserRouter> komponenta, volající <Route> komponentu pro danou adresu URL a předávání parametrů z adresy URL do <App> jako rekvizity. Pojďme kopat do každého kousku…

<BrowserRouter>

const AppRouter = () => (
  <BrowserRouter>
    ...
  </BrowserRouter>
);

Chcete-li použít <Route> , musí mít <BrowserRouter> (nebo jeden z jiných typů routerů) někde jako rodič. React Router používá tuto komponentu vyššího řádu k tomu, aby pomáhala provádět směrovací kouzla na pozadí. Zde není nutná žádná konfigurace komponent – ​​vše, co musíte udělat, je ujistit se, že je vše zabaleno do <BrowserRouter> otevřít/zavřít tagy.

<BrowserRouter> dokumentace

<Route>

<Route
  path='/:parameter1/:parameter2/:parameter3'
  render={props => <App {...props} />}
/>

Tady se dělá jádro práce. je komponenta, která rozhoduje o tom, která komponenta se zobrazí na základě adresy URL.
path='/:parameter1/:parameter2/:parameter3' říká React Routeru, aby použil tuto komponentu, kdykoli má adresa URL cestu se 3 položkami oddělenými lomítkem za základní adresou URL (například tvshows.com/series/season/epizode) . Parametry, jako je :parameter1, jsou proměnné, které mají přiřadit danou část adresy URL a předat ji do vykreslené komponenty.
render={props => }vykreslí komponentu s rekvizitami předanými z trasy, která bude zahrnovat parametry nastavené v cestě v řádku výše

<Route> dokumentace

<App>

const App = props => {
  const { parameter1, parameter2, parameter3 } = props.match.params;
  return (
    <div>
      First: {parameter1} <br />
      Second: {parameter2} <br />
      Third: {parameter3} <br />
    </div>
  );
};

Od <Route> vykresluje toto <App> součástí, je to také předávání rekvizit, které potřebuje. <Route> standardně předává několik rekvizit, ale jedna část rekvizit, o kterou se zde zajímáme, je match.params. Kdykoli použijete <Route> pro vykreslení komponenty můžete vždy najít parametry adresy URL v props.match.params.

<App> komponenta používá destrukci objektu k přiřazení lokálních proměnných pro všechny parametry předávané v props.match.params a poté tyto proměnné použije k zobrazení dat z URL. To je ono!

Shrnutí

Jakmile se naučíte používat parametry adresy URL, můžete udělat několik velmi účinných věcí s vykreslováním aplikace na základě přesné adresy URL, kterou uživatel navštěvuje. Je to dokonce praktický způsob, jak zvýšit stav v určitých případech, kdy máte více komponent nižší úrovně sdílejících stejný stav, který se také odráží v adrese URL.

Otázky? Komentáře? obavy? Dej mi vědět! Komentujte níže nebo mi napište na Twitteru @ZakLaughton.