Réagir routeur Commutateur comportement
(react-router-dom
version: 4.1.1)
J'ai des parcours de travail mis en place, mais je suis un peu confus au sujet de pourquoi les <Switch>
était nécessaire:
index.js
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';
ReactDOM.render(
<HashRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/fridge" component={FridgePage} />
</Switch>
</HashRouter>,
document.getElementById('root')
)
App.jsx
import Header from './Header.jsx';
import {Link} from 'react-router-dom';
export default class App extends React.Component {
render() {
console.log(this.props);
return (
<div>
<h1>Herbnew</h1>
<Link to="fridge">Fridge</Link>
{this.props.children}
</div>
);
}
}
FridgePage.jsx
import React from 'react';
export default class FridgePage extends React.Component {
render() {
return (
<div>
<h1>Fridge</h1>
You finally found the fridge!
</div>
);
}
}
J'ai utilisé un div
envelopper les routes au lieu d'un Switch
. Dans ce cas, je vois la App
rendus et essayez de cliquer sur le Réfrigérateur lien, mais rien ne se passe (le FridgePage
n'est pas rendu), et aucune erreur n'est sortie dans la console.
Si je comprends bien, la seule chose que l' Switch
n'est exclusivement rendu de la première voie de correspondance, et de la commune de problème résultant de l'omission c'est le rendu de deux pages à la fois. Si mon "/"
route est exact, alors, même sans le Switch, le Réfrigérateur doit être la seule voie qui correspond, droite? Pourquoi n'est-il pas rendu à tous?
OriginalL'auteur Jess | 2017-07-15
Vous devez vous connecter pour publier un commentaire.
<Switch>
ne renvoie qu'un seul premier itinéraire correspondant.exact
renvoie n'importe quel nombre d'itinéraires qui correspondent exactement.Par exemple:
Si le composant Manquant n'était pas à l'intérieur d'un
<Switch>
, il serait retourné sur chaque itinéraire.Avec
exact
, le "/" animaux de route ne sera pas attraper tous les route contenant "/animaux" comme "animaux/poissons".Sans
exact
, le "/animaux/poissons" route permettra également de remettre le Poisson composant pour "animaux/poissons/cod", "/animaux/poissons/saumon", etc.Être en dehors de la
<Switch>
instruction et sansexact
, la composante de l'Ordre est rendu sur chaque chemin d'accès contenant "/animaux".Habituellement, si vous ne l'utilisez pas exact vous utilisez un caractère générique, de sorte que vous ne renvoyez pas les pages au hasard.
/humans
laMissing
composant serait rendue. Je recommande de le nommer plus évident commePageNotFound
, ouError404
.OriginalL'auteur awc737