Primeros pasos con React Router

Hola mundo con React y React Router #

Una vez que haya instalado react y react-router, es hora de usar ambos juntos.

La sintaxis es muy simple, especifica la ‘url’ y el ‘componente’ que desea representar cuando se abre esa url

<Ruta ruta="hola" componente={ HolaComponente } />

Esto significa que cuando la ruta de la URL es hola, renderice el componente HelloComponent

NOMBRE DE ARCHIVO: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, Link } from 'react-router';

// These are just demo components which render different text.

let DashboardPage = () => (
  <div>
    <h1>Welcome User</h1>
    <p>This is your dashboard and I am an example of a stateless functional component.</p>
    <Link to="/settings">Goto Settings Page</Link>
  </div>
)

let SettingsPage = () => (
  <div>
    <h1>Manage your settings</h1>
    <p>display the settings form fields here...or whatever you want</p>
    <Link to="/">Back to Dashboard Page</Link>
  </div>
)

let AuthLoginPage = () => (
  <div>
    <h1>Login Now</h1>
    <div>
      <form action="">
        <input type="text" name="email" placeholder="email address" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
)

let AuthLogoutPage = () => (
  <div>
    <h1>You have been successfully logged out.</h1>
    <div style={{ marginTop: 30 }}>
      <Link to="/auth/login">Back to login page</Link>
    </div>
  </div>
)

let ArticlePage = ({ params }) => (
  <h3>Article {params.id}</h3>
)

let PageNotFound = () => (
  <div>
    <h1>The page you're looking for doesn't exist.</h1>
  </div>
)

// Here we pass Router to the render function.
render( (
    <Router history={ browserHistory }>

      <Route path="/" component={ DashboardPage } />
      <Route path="settings" component={ SettingsPage } />

      <Route path="auth">
        <IndexRoute component={ AuthLoginPage } />
        <Route path="login" component={ AuthLoginPage } />
        <Route path="logout" component={ AuthLogoutPage } />
      </Route>
    
      <Route path="articles/:id" component={ ArticlePage } />

      <Route path="*" component={ PageNotFound } />

    </Router>
  ), document.body );

Parámetros de ruta: la ruta del enrutador se puede configurar para tomar parámetros de modo que podamos leer el valor del parámetro en el componente. La ruta en <Route path="articles/:id" component={ ArticlePage } /> tiene un /:id. Esta variable id sirve como parámetro de ruta y se puede acceder a ella en el componente ArticlePage usando {props.params.id}.

Si visitamos http://localhost:3000/#/articles/123 entonces {props.params.id} en el componente ArticlePage se resolverá en 123. Pero visitando la URL http://localhost:3000 /#/articles, no funcionará porque no hay un parámetro de identificación.

El parámetro de ruta se puede hacer opcional escribiéndolo entre un par de paréntesis: <Ruta ruta="artículos(/:id)" componente={PáginaArtículo} />

Si desea utilizar subrutas, puede hacerlo

<Route path="path" component={ PathComponent }>
  <Route path="subpath" component={ SubPathComponent } />
</Route>

• cuando se accede a /ruta, se representará PathComponent
• cuando se accede a /path/subpath, PathComponent se renderizará y SubPathComponent se le pasará como props.children

Puede usar path="*" para capturar todas las rutas que no existen y mostrar la página 404 página no encontrada.

Empezando #

Este inicio asume que estás trabajando con [create-react-app][1], o algo equivalente usando Babel y todas las ventajas que existen.

Consulte también la excelente documentación [aquí mismo] [2].

Primero, instale react-router-dom:

npm install react-router-dom o yarn add react-router-dom.

Luego, cree un componente que exista de una barra de navegación básica con dos elementos y páginas básicas:

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    <p>We are now on the HOME page</p>
  </div>
)

const About = () => (
  <div>
    <p>We are now on the ABOUT page</p>
  </div>
)

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr/>
      <Route path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </BrowserRouter>
)
export default App

Vayamos paso a paso a través de este código:

• importar React from 'react': Asegúrate de importar React
• importar {BrowserRouter as Router, Route, Link} de 'react-router-dom' dividido:
• BrowserRouter es el propio enrutador. Asegúrese de envolver su componente dentro del componente BrowserRouter.
• Ruta es una ruta en particular a la que se puede navegar
• Link es un componente que produce una etiqueta <a href="...">, que puede usar como un hipervínculo.

• const Home es una función que devuelve la página de inicio.
• const Acerca de es una función que devuelve la página Acerca de.

• const App es el componente principal:

• <BrowserRouter> es el componente [JSX][3] que envuelve los componentes en los que desea usar el componente <Route>.

• ‘

  es un elemento único para envolver todos los JSX dentro delBrowserRouter`.

• <ul> es la barra de navegación. Contiene un enlace a Inicio y un enlace a Acerca de.

• <li><Link to="/">Home</Link></li> enlaza con la página de inicio. Puede ver que, dado que el enlace se refiere a “/”, una ruta relativa vacía muestra la página de inicio.

• <li><Link to="/about">Acerca de</Link></li> enlaza con la página Acerca de.

• <Ruta ruta="/" componente={Inicio}/> describe qué componente debe representarse si la ruta relativa es "/".

• <Ruta ruta="/acerca de" componente={Acerca de}/> describe qué componente debe representarse si la ruta relativa es "/acerca de".

Mucho que aprender de aquí, pero espero que esto explique los fundamentos, para que desde aquí puedas continuar con tu aprendizaje.

[1]: https://www.wikiod.com/es/reactjs/primeros-pasos-con-reaccionar#Crear aplicación de reacción [2]: https://reacttraining.com/react-router/web/guides/quick-start [3]: https://www.wikiod.com/es/reactjs/jsx

Instalación y configuración #

Para instalar React Router, simplemente ejecute el comando npm

npm install --save react-router

Y tu estas listo. Esto es literalmente todo lo que tiene que hacer para instalar el enrutador de reacción.

** Tenga en cuenta: ** react-router depende de react, así que asegúrese de instalar react también.

Para configurar:

usando un transpilador ES6, como babel

import { Router, Route, Link } from 'react-router'

sin usar un transpilador ES6

var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').Link

Instalación usando compilación UMD #

También hay una compilación disponible en npmcdn. Puedes incluir el script así:

<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>

La biblioteca estará disponible globalmente en window.ReactRouter.