web-dev-qa-db-fra.com

React comportement du commutateur de routeur

(react-router-dom version: 4.1.1)

J'ai des itinéraires de travail mis en place, mais je suis un peu confus sur la raison pour laquelle le <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'avais l'habitude d'avoir un div enveloppant les routes au lieu d'un Switch. Dans ce cas, je vois le rendu de App et essaie de cliquer sur le lien Fridge, mais rien ne se produit (le FridgePage n'est pas restitué) et aucune erreur n'est générée dans la console.

Si je comprends bien, la seule chose que fait Switch consiste à restituer exclusivement le premier itinéraire auquel elle correspond, et le problème courant résultant de son omission est le rendu simultané des deux pages. Si mon "/" _ itinéraire est exact, alors même sans le commutateur, le réfrigérateur devrait être le seul itinéraire qui correspond, non? Pourquoi ne rend-il pas du tout?

reactjsreact-routerreact-router-v4react-router-dom
22
Jess

<Switch> renvoie un seul premier itinéraire correspondant.

exact renvoie n'importe quel nombre d'itinéraires correspondant exactement.

Par exemple:

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />

Si le composant manquant n'était pas à l'intérieur d'un <Switch>, il sera renvoyé sur chaque itinéraire.

Avec exact, la route "/ animaux" n'acceptera pas toutes les routes contenant des "/ animaux" tels que "animaux/poissons".

Sans exact, la route "/ animaux/poissons" renverra également la composante Poisson pour "animaux/poisson/cabillaud", "/ animaux/poisson/saumon", etc.

Être en dehors du <Switch> statement et sans exact, le composant Order est rendu sur chaque chemin contenant "/ animaux".

Habituellement, si vous n'utilisez pas exact, vous utiliserez un caractère générique afin de ne pas renvoyer de pages aléatoires.

34
awc737