Použití React Router pro jednostránkovou aplikaci

React není dodáván s vestavěným routerem, ale můžeme snadno dosáhnout směrování pomocí react-router-dom knihovna. Směrování je způsob, jakým webové aplikace řídí provoz. (Pokud víte, co je směrování, klidně tuto část přeskočte.)

Příklad:Pokud přejdete na taniarascia.com, skončíte na mé domovské stránce. Pokud přejdete na stránku taniarascia.com/me, budete přesměrováni na mou stránku o mně. Pokud přejdete na stránku taniarascia.com/categories/javascript nebo taniarascia.com/categories/css, skončíte na stránce se seznamem kategorií. Trasy pro tyto stránky vypadají nějak takto:

  • / - kořen
  • /:page_id - stránka
  • /categories/:category_id - kategorie

Ve skutečnosti nevytvářím složku s názvem categories a naplňte jej hromadou souborů jako javascript.html nebo css.html , Mám jen jednu šablonu a router ví, že má nasměrovat na správnou šablonu. Jakmile se dostane k šabloně, může z adresy URL zjistit, které proměnné má zobrazit – například příspěvky související s JavaScriptem nebo CSS.

Tento web je také Jednostránkovou aplikací (nebo SPA) – načte se pouze jedna stránka a každé kliknutí na novou stránku načte další data JSON, ale ve skutečnosti nevyžaduje nový zdroj, jako je načtení index.html a about-me.html by.

Ukážu vám, jak nastavit jednoduché SPA v React s react-router-dom a dynamicky stahovat data prostřednictvím adresy URL. Níže je uveden zdroj dokončeného projektu, pokud se cestou ztratíte.

  • Zobrazit zdroj

Předpoklady

  • Pokud ještě neznáte React nebo React Hooks, přečtěte si článek Začínáme s React nebo Sestavení aplikace React s Hooks.
  • Přečtěte si Jak se připojit k rozhraní API v JavaScriptu, pokud vůbec nevíte, jak s rozhraními API pracovat.

Instalace

Vytvořte novou aplikaci React.

npx create-react-app router-example
Creating a new React app in /Users/taniarascia/dev/sandbox/router-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

Náš projekt má dvě závislosti - react-router-dom pro router a axios pro volání API.

npm install react-router-dom axios

nebo

yarn add react-router-dom axios

Směrovač prohlížeče

Chcete-li použít react-router-dom , musíme zabalit celý náš App komponenta v BrowserRouter . Existují dva typy směrovačů:

  • BrowserRouter - vytváří hezké adresy URL jako example.com/about .
  • HashRouter - vytváří adresy URL s octothorpe (nebo hashtagem, chcete-li), které by vypadaly jako example.com/#about .

Použijme BrowserRouter .

src/index.js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector('#root')
)

Trasa a přepínač

Nyní v App.js , můžeme se rozhodnout pro trasy, které chceme použít, a podle toho směrovat. Použijeme Route a Switch pro tento úkol.

  • Switch – Seskupí všechny vaše trasy dohromady a zajistí, že budou mít přednost od shora dolů.
  • Route - Každá jednotlivá trasa.
App.js
import React from 'react'
import { Route, Switch } from 'react-router-dom'
// We will create these two pages in a moment
import HomePage from './pages/HomePage'
import UserPage from './pages/UserPage'

export default function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/:id" component={UserPage} />
    </Switch>
  )
}

Odpovídáme kořenové trase (/ ) na HomePage a dynamicky přiřazovat jakoukoli jinou stránku k UserPage . Pro tento jednoduchý příklad mám pouze jednu cestu, ale můžete udělat více takto:

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:id" component={UserPage} />
  <Route path="/categories" component={CategoriesPage} />
  <Route path="/categories/:id" component={IndividualCategoryPage} />
</Switch>

Tím by se zajistilo, že taniarascia.com/categories přejde na stránku se seznamem všech kategorií, ale taniarascia.com/categories/javascript přejde na úplně jinou šablonu pro výpis jednotlivých kategorií.

Abychom vytvořili odkaz na stránku v rámci SPA, použijeme Link . Pokud bychom použili tradiční <a href="/route"> , udělalo by to úplně nový požadavek a znovu načetlo stránku, takže máme Link aby nám pomohl.

src/pages/HomePage.js
import React from 'react'
import { Link } from 'react-router-dom'

export default function HomePage() {
  return (
    <div className="container">
      <h1>Home Page</h1>
      <p>
        <Link to="/taniarascia">taniarascia</Link> on GitHub.
      </p>
    </div>
  )
}

Takže teď jdu na svou první cestu, kořenovou cestu, která načítá HomePage a vidím obsah a odkaz.

Parametr dynamické trasy

Naše Link přechází na /taniarascia , který bude odpovídat /:id parametr v Route . Aby bylo možné dynamicky získat obsah z adresy URL – v tomto případě taniarascia - použijeme match.params.id z props .

Tento parametr použiji k volání rozhraní GitHub API a načtení mých dat. V tomto příkladu budu používat Hooks, takže pokud je neznáte, přečtěte si prosím Vytváření aplikace CRUD s Hooks.

src/pages/UserPage.js
import React, { useState, useEffect } from 'react'
import axios from 'axios'

export default function UserPage(props) {
  // Setting initial state
  const initialUserState = {
    user: {},
    loading: true,
  }

  // Getter and setter for user state
  const [user, setUser] = useState(initialUserState)

  // Using useEffect to retrieve data from an API (similar to componentDidMount in a class)
  useEffect(() => {
    const getUser = async () => {
      // Pass our param (:id) to the API call
      const { data } = await axios(
        `https://api.github.com/users/${props.match.params.id}`
      )

      // Update state
      setUser(data)
    }

    // Invoke the async function
    getUser()
  }, []) // Don't forget the `[]`, which will prevent useEffect from running in an infinite loop

  // Return a table with some data from the API.
  return user.loading ? (
    <div>Loading...</div>
  ) : (
    <div className="container">
      <h1>{props.match.params.id}</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Location</th>
            <th>Website</th>
            <th>Followers</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{user.name}</td>
            <td>{user.location}</td>
            <td>
              <a href={user.blog}>{user.blog}</a>
            </td>
            <td>{user.followers}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

Závěr

Pokud jste se někde po cestě ztratili, podívejte se na zdroj na GitHubu.

  • Zobrazit zdroj

Existuje také upozornění:pokud to chcete použít na stránkách GitHub, není to dost chytré, abyste si uvědomili, že you.github.io/repo/:id by měl směrovat na /:id . Pokud chcete hostovat na stránkách GitHub a narazíte na tento problém, pomůže vám hostování vaší jednostránkové aplikace na stránkách GitHub.