Saltar al contenido

Cómo vincular a rutas anidadas en React Router

Solución:

Al anidar rutas, tenga cuidado cuando tenga la intención de usar rutas relativas para no usar rutas absolutas. Definición de tu ruta

<Route path="/leveltwo/:idd" component={LevelTwo}/>

en su lugar debería ser:

<Route path="leveltwo/:idd" component={LevelTwo}/>

La razón por la cual <div><Link to="leveltwo/5">Go to LevelTwo</Link></div> estaba trabajando es porque <Link> solo admite rutas absolutas (ver arriba) y en realidad apuntaba a /leveltwo/5 y la definición de ruta que tenía inicialmente se definió con una ruta absoluta. Entonces, aunque el código se ejecutó, en realidad no se estaba ejecutando de la manera deseada.

Creo que el problema es que tienes un / en la definición de subruta.

Solo cambia esto:

<Route path="/leveltwo/:idd" component={LevelTwo}/>

para

<Route path="leveltwo/:idd" component={LevelTwo}/>

El siguiente es el fragmento de trabajo

const {
  Router,
  Route,
  IndexRoute,
  Redirect,
  Link,
  IndexLink,
  hashHistory
} = ReactRouter

var App = React.createClass({
  render : function() {
  	return (
    	<div>
      	<h1>My Application</h1>
        <div><Link to="/levelone/1">Go to One</Link></div>
        <div><Link to="levelone/1/leveltwo/5">Go to Three</Link></div>
        {this.props.children}
      </div>
    )
  }
})

var Index = React.createClass({
  render : function() {
  	return (
      <div>
      	<h2>This is index route</h2>
      </div>
    )
  }
})

var LevelOne =  React.createClass({
  render : function() {
  	return (
    	<div>
      	<h2>This is LevelOne</h2>
        {this.props.children}
      </div>
    )
  }
})

var LevelTwo = React.createClass({
  render : function() {
  	return (
    	<div>
      	<h2>This is LevelTwo</h2>
      </div>
    )
  }
})


var routes= (
	<Route path= "https://foroayuda.es/" component={App}>
    	<IndexRoute component={Index}/>
    	<Route path="/levelone/:id" component={LevelOne}>
            <Route path="leveltwo/:idd" component={LevelTwo}/>
        </Route>
    </Route>
)

ReactDOM.render(<Router history={ hashHistory } routes={routes}></Router>, document.getElementById('app'));
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/umd/ReactRouter.js" charset="utf-8"></script>
<div id="app">
  <div>

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *