Necesito múltiples rutas anidadas en react-router-dom
estoy usando v4 de react-router-dom
tengo mi
import { BrowserRouter as Router, Route } from 'react-router-dom';y necesito que los componentes se rendericen así
--- Login --- Home --- Page 1 --- Page 2 --- Page 3 --- About --- etcEl componente Inicio contiene un componente Encabezado que es común a los componentes Página 1, Página 2 y Página 3, pero no está presente en Inicio de sesión y Acerca de.
Mi código js se lee así
<Router> <div> <Route path='/login' component={Login} /> <Home> <Route path='/page1' component={Page1} /> <Route path='/page2' component={Page2} /> <Route path='/page3' component={Page3} /> </Home> <Route path='/about' component={About} /> </div> </Router>Espero que el componente de inicio de sesión se muestre solo en /login Cuando solicito /page1, /page2, /page3, deben contener el componente Home y el contenido de esa página, respectivamente.
En cambio, lo que obtengo es el componente de inicio de sesión representado y, debajo, se representa el componente de Page1.
Estoy bastante seguro de que me estoy perdiendo algo muy trivial o cometiendo un error realmente tonto en alguna parte, y agradecería toda la ayuda que pudiera obtener. He estado atrapado con esto durante los últimos dos días.
Utilice la coincidencia de URL/ruta obtenida de props this.props.match.path para obtener la ruta establecida en un componente.
Defina sus rutas principales de la siguiente manera
<Router> <div> <Route exact path="/" component={DummyIndex} /> {/* Note-1 */} <Route path="/login" component={Login} /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> <Route path="/etc" component={Etc} /> </div> </Router> Luego, en Home Component, defina sus rutas
class Home extends Component { render() { return <div> <Route exact path={this.props.match.path} component={HomeDefault} /> <Route path={`${this.props.match.path}/one`} component={HomePageOne} /> <Route path={`${this.props.match.path}/two`} component={HomePageTwo} /> </div> } }Las rutas definidas son las siguientes
Si desea anidar más rutas en HomePageOne como /home/one/a y /home/one/b , puede seguir el mismo enfoque.
Nota-1: si no desea anidar más, simplemente configure la ruta con prop exact .
EDITAR (15 de mayo de 2017)
Inicialmente, usé props.match.url y ahora lo cambié a props.match.path .
Podemos usar props.match.path en lugar de props.match.url en la ruta de la ruta, de modo que si usa parámetros de ruta en rutas de nivel superior, puede obtenerlos en rutas internas (anidadas) a través props.match.params .
Si no tiene ningún parámetro de ruta, props.match.url es suficiente
Use el componente Switch en el enrutador v4
<Router> <Switch> <Route path='/login' component={Login} /> <Route path='/about' component={About} /> <Home> <Route component={({ match }) => <div> <Route path='/page1' component={Page1} /> <Route path='/page2' component={Page2} /> <Route path='/page3' component={Page3} /> </div> }/> </Home> </Switch> export default class Home extends Component { render() { return ( <div className="Home"> { this.props.children } </div> ) } }Creo que este código muestra la idea básica de usar el componente.
Esta semana tuve el mismo problema, creo que el proyecto está pasando por un tiempo de confusión porque toda la documentación, ejemplos y videos son para las versiones anteriores y los documentos para la versión 4 son confusos.
Así es como hago las cosas, avíseme si esto ayuda
import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Root from './Root'; import Home from './Home'; import About from './About'; import './App.css'; class App extends Component { render() { return ( <BrowserRouter> <div> <Root> <Switch> <Route exact path="/" component={Home} /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> </Switch> </Root> </div> </BrowserRouter> ); } } export default App;