(versión react-router-dom
: 4.1.1)
Tengo rutas de trabajo configuradas, pero estoy un poco confundido acerca de por qué era necesario <Switch>
:
índice.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') )
Aplicación.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> ); } }
Solía tener un div
que envolvía las rutas en lugar de un Switch
. En ese caso, veo la App
renderizada e intento hacer clic en el enlace Fridge, pero no pasa nada ( FridgePage
no se renderiza) y no aparece ningún error en la consola.
Según tengo entendido, lo único que hace Switch
es mostrar exclusivamente la primera ruta que coincide, y el problema común como resultado de omitirlo es mostrar ambas páginas a la vez. Si mi ruta "/"
es exacta, incluso sin Switch, Fridge debería ser la única ruta que coincida, ¿verdad? ¿Por qué no se renderiza en absoluto?
<Switch>
devuelve solo una primera ruta coincidente.
exact
devuelve cualquier número de rutas que coincidan exactamente.
Por ejemplo:
<Switch> <Route exact path="/animals" component={Animals} /> <Route path="/animals/fish" component={Fish} /> <Route component={Missing} /> </Switch> <Route path="/animals" component={Order} />
Si el componente que falta no estuviera dentro de un <Switch>
, se devolvería en cada ruta.
Con exact
, la ruta "/animals" no captará todas las rutas que contengan "/animals", como "animales/peces".
Sin exact
, la ruta "/animales/pez" también devolverá el componente Pescado para "animales/pez/bacalao", "/animales/pez/salmón", etc.
Al estar fuera de la instrucción <Switch>
y sin exact
, el componente Orden se representa en cada ruta que contiene "/ animales".
Por lo general, si no está usando exactamente, usaría un comodín, para que no devuelva páginas aleatorias.
FridgePage no se procesa debido a que falta '/' en . Supongo que debe ser