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 jakoexample.com/about
.HashRouter
- vytváří adresy URL s octothorpe (nebo hashtagem, chcete-li), které by vypadaly jakoexample.com/#about
.
Použijme BrowserRouter
.
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.
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í.
Odkaz
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.
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.jsimport 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.