javascript - react - Múltiples rutas anidadas en reaccion-router-dom v4

reactjs link example

Question

Necesito múltiples rutas anidadas en reaccion-router-dom

Estoy usando v4 de reaccion-router-dom

Tengo mi

import { BrowserRouter as Router, Route } from ''react-router-dom'';

y necesito los componentes para hacer como tal

--- Login
--- Home
--- Page 1
--- Page 2
--- Page 3
--- About
--- etc

El componente Inicio contiene un componente Encabezado que es común a los componentes Página1, Página2 y Página3, 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, deberían contener el componente de inicio y el contenido de esa página respectivamente.

Lo que obtengo en cambio es el componente de inicio de sesión y debajo del componente de esa página se representa.

Estoy bastante seguro de que me estoy perdiendo algo muy trivial o que estoy cometiendo un error realmente tonto en algún lugar, y apreciaría toda la ayuda que pudiera obtener. He estado atrapado con esto durante los últimos dos días.

Answer 1

Esta semana tuve el mismo problema, creo que el proyecto está pasando por un tiempo de confusión porque toda la documentación, los ejemplos y los videos son para las versiones anteriores y los documentos para la versión 4 son confusos.
Así es como hago las cosas, hazme saber 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;

Answer 2

Mueva todas las rutas secundarias al componente principal y extienda la ruta como se muestra a continuación.
<Route path={`${match.url}/keyword`} component={Topic}/>
También verifique la formación de enrutador de reacción

Answer 3

Usa el componente Switch en el router 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 componente.

Answer 4

Use la concordancia url / ruta obtenida de props this.props.match.path para obtener la ruta que está establecida en un componente.

Define tus rutas principales como abajo

<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, define tus 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.

• /iniciar sesión
• /casa
• / casa / uno
• / casa / dos
• /acerca de
• / etc

Si desea anidar más rutas en HomePageOne como / home / one / ay / home / one / b , puede continuar con el mismo enfoque.

Nota-1: Si no desea más anidamientos, simplemente configure la ruta con la proposición exact .

EDITAR (15 de mayo de 2017)

Inicialmente, he usado props.match.url y ahora lo cambié por props.match.path .

Podemos usar props.match.path lugar de props.match.url en la ruta, de modo que si usa los parámetros de ruta en las rutas de nivel superior, puede obtenerla en rutas internas (anidadas) a través de props.match.params .

Si no tiene ningún parámetro de ruta, props.match.url es suficiente

Answer 5

Utilice como el siguiente:

class App extends Component {
render() {
return (
<BrowserRouter>
<Link to=''/create''> Create </Link>
<Link to=''/ExpenseDashboard''> Expense Dashboard </Link>
<Switch>
<Route path=''/ExpenseDashboard'' component={ExpenseDashboard} />
<Route path=''/create'' component={AddExpensePage} />
<Route path=''/Edit'' component={EditPage} />
<Route path=''/Help'' component={HelpPage} />
<Route component={NoMatch} />
</Switch>
</BrowserRouter>
);
}
}

Ver más @ Encender GitHub