in

ReactJS – Enrutador

clickable links

En este capítulo, aprenderemos cómo configurar el enrutamiento para una aplicación.

Paso 1: instalar un enrutador React

Una forma sencilla de instalar el reaccionar-enrutador es ejecutar el siguiente fragmento de código en el símbolo del sistema ventana.

C:UsersusernameDesktopreactApp>npm install react-router

Paso 2: crear componentes

En este paso, crearemos cuatro componentes. los Aplicación El componente se utilizará como menú de pestañas. Los otros tres componentes (Inicio), (Acerca de) y (Contacto) se renderizan una vez que la ruta ha cambiado.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

Paso 3: agregar un enrutador

Ahora, agregaremos rutas a la aplicación. En lugar de renderizar Aplicación elemento como en el ejemplo anterior, esta vez el Enrutador será renderizado. También configuraremos componentes para cada ruta.

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

Cuando se inicia la aplicación, veremos tres enlaces en los que se puede hacer clic que se pueden usar para cambiar la ruta.

Enlaces en los que se puede hacer clic

Deja una respuesta

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

telefonos con imessage

¿Cómo activar iMessage en todos los teléfonos Apple iPhone iOS? – Rapido y facil

apple touch icon@2

hibernación: ¿Java tiene una declaración de uso?