web-dev-qa-db-de.com

React Router-Switch-Verhalten

(react-router-dom Version: 4.1.1)

Ich habe Arbeitswege eingerichtet, aber ich bin ein bisschen verwirrt, warum die <Switch> War notwendig:

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>
        );
    }
}

Früher hatte ich ein div, das die Routen anstatt eines Switch umhüllte. In diesem Fall wird das App gerendert und versucht, auf den Link "Kühlschrank" zu klicken. Es geschieht jedoch nichts (das FridgePage wird nicht gerendert), und es wird kein Fehler in der Konsole ausgegeben.

Soweit ich weiß, gibt das Switch nur die erste Route wieder, mit der es übereinstimmt, und das häufigste Problem, wenn es weggelassen wird, besteht darin, beide Seiten gleichzeitig wiederzugeben. Wenn mein "/" Route ist genau, dann sollte auch ohne den Switch der Kühlschrank die einzige Route sein, die passt, oder? Warum wird es überhaupt nicht gerendert?

22
Jess

<Switch> Gibt nur eine erste übereinstimmende Route zurück.

exact gibt eine beliebige Anzahl von Routen zurück, die genau übereinstimmen.

Beispielsweise:

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

Wenn sich die fehlende Komponente nicht in einem <Switch> Befand, würde sie auf jeder einzelnen Route zurückgegeben.

Mit exact fängt die Route "/ animals" nicht jede Route ab, die "/ animals" enthält, z. B. "animals/fish".

Ohne exact gibt die Route "/ animals/fish" auch die Fischkomponente für "animals/fish/cod", "/ animals/fish/salmon" usw. zurück.

Befindet sich die Order-Komponente außerhalb der Anweisung <Switch> Und ohne exact, wird sie auf jedem Pfad gerendert, der "/ animals" enthält.


Wenn Sie nicht exakt verwenden, verwenden Sie normalerweise einen Platzhalter, sodass Sie keine zufälligen Seiten zurückgeben.

34
awc737