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