(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