Dříve jsme mluvili o některých hlavních pojmech nebo funkcích React-Redux, které mohou zůstat nepovšimnuty, když stavíme nebo pracujeme na více a více projektech s úžasnou knihovnou uživatelského rozhraní.
Tentokrát však uvádím několik základních pojmů ve formě otázek pro React Router. Jak možná víte, je to výkonná knihovna směrování, která pomáhá rychle přidávat nové obrazovky (stránky) do vaší aplikace a přitom udržovat adresu URL v synchronizaci s tím, co se zobrazuje na stránce .
Samozřejmě, stejně jako předtím, pro každý z nich budou konkrétní příklady!
1. Jak se React Router liší od history knihovna? (Dok 📃) (◎﹏◎)
Už víte, co je React Router, ale co je to history knihovna a jak se liší?
Pokud jde o React Router, jedná se o obal kolem history který se stará o interakci s window.history prohlížeče API s jeho prohlížečem a historie hash.
2. Jaký je účel push() a replace() metody history ?つ﹏⊂
> push() (Dok 📃)
push(path, [state]) metoda tlačí nový záznam do history zásobník.
Příklad:
// usually all you need
<Link to="/somewhere"/>
// but you can use a location instead
const location = {
pathname: '/somewhere',
state: { fromDashboard: true }
}
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
> replace() (Dok 📃)
replace(path, [state]) metoda replaces aktuální záznam na history zásobník.
Příklad:
// Continued from the above example
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)
3. Jak získat parametry dotazu v React Router v4? ╮（╯＿╰）╭
Pro podporu starého prohlížeče samozřejmě používáte knihovnu Polyfill, ale existuje doporučený způsob, jak to udělat pomocí query-string knihovna. Zde je postup:
const queryString = require('query-string');
const parsed = queryString.parse(props.location.search);
Dalším způsobem může být použití nativního URLSearchParams rozhraní. Podívejte se na následující příklad:
const params = new URLSearchParams(props.location.search)
const foo = params.get('name')
4. Jak vyřešit varování „Směrovač může mít pouze jeden podřízený prvek“? ㄟ( ▔, ▔ )ㄏ
Podle jeho zdrojového kódu Router očekává this.props.children být null . Takže musíte zabalit všechny vaše <Route /> příkazy uvnitř <Switch> který vykreslí trasu výhradně . Zde je kompletní řešení:
// Add the `Switch` import:
import { Switch, Router, Route } from 'react-router'
// Enclose all your routes inside this new `<Switch>` block:
<Router>
<Switch>
<Route {/* ... */} />
<Route {/* ... */} />
</Switch>
</Router>
Pro podrobnou diskusi se podívejte na následující otázku na Stackoverflow:
React-Router pouze jedno dítě Mar 24 '17 Komentáře:1 Odpovědí:10 
75 
Stále se mi zobrazuje chyba:
při použití reakčního směrovače.
Nemohu přijít na to, proč to nefunguje, protože je to přesně jako kód, který ukazují v jejich příkladu:Rychlý start
Zde je můj kód:
import React from 'react'
import 5. Jak předat parametry na history.push() v React Router v4? ¯(°_o)/¯
history.push() metoda tlačí nový záznam na history zásobník. Při implementaci navigace můžete předat požadované parametry následujícím způsobem:
this.props.history.push({
pathname: '/template',
search: '?query=abc', // Here
state: { detail: response.data }
})
6. Jak implementujete výchozí nebo PageNotFound strana? (°ー°〃)
Opět <Switch> komponenta vám zde pomůže. Podle dokumentace:
Příklad:
<Router>
<div>
<Switch>
<Route path="/" exact component={Home}/>
<Redirect from="/old-match" to="/will-match"/>
<Route path="/will-match" component={WillMatch}/>
<Route component={NoMatch}/>
</Switch>
</div>
</Router>
Vše, co musíte udělat, je přidat path s <Switch> jak následuje:
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/user" component={User}/>
<Route component={Notfound} />
</Switch
Dokumentace React Router obsahuje příklad týkající se tohoto vložený níže z CodeSandbox:
7. Jak přidáte funkci automatického přesměrování po přihlášení? (o_ _)ﾉ
Můžete použít <Redirect> komponent. Vykreslování <Redirect> bude navigovat na nové místo. Nové umístění přepíše aktuální umístění v history zásobník.
import { Redirect } from 'react-router'
export default class LoginComponent extends Component {
render() {
if (this.state.isLoggedIn === true) {
return <Redirect to="/your/redirect/page" />
} else {
return <div>{'Login Please'}</div>
}
}
}
Podívejte se na toto video z tohoto kurzu Scotch.io o tom, jak implementovat Redirect s ověřením.
Tak jak to bylo? Našli jste něco skvělého? Nikdy jsem neimplementoval ověřování pomocí React Router, určitě to brzy vyzkouším. Jaké další termíny nebo funkce můžete demystifikovat? Pole komentáře je celé vaše!