reactjs - pagina - Ejemplo de barra de navegación del router React

redirect react router

Question

Soy un principiante en React JS y me gustaría desarrollar una navegación basada en el enrutador de reacción para mi Dashboard. La maqueta es la siguiente:

Mi código app.js que creé para probar el enrutamiento es el siguiente:

import React from ''react''
import { render } from ''react-dom''
import { Router, Route, Link } from ''react-router''
import Login from ''./components/Login.js'';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById(''placeholder''))

¿Cómo creo la navegación como se muestra en la maqueta?

Answer 1

Sí, Daniel está en lo cierto, pero para ampliar su respuesta, su componente de aplicación principal necesitaría tener un componente de barra de navegación dentro de él. De esta forma, cuando represente la aplicación primaria (cualquier página debajo de la ruta ''/''), también mostrará la barra de navegación. Supongo que no le gustaría que su página de inicio de sesión muestre la barra de navegación, por lo que no debería ser un componente anidado, sino que debería ser solo. Entonces tus rutas terminarían luciendo algo como esto:

<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>

Y los otros componentes se verían así:

var NavBar = React.createClass({
  render() {
    return (
      <div>
        <ul>
          <a onClick={() => history.push(''page1'') }>Page 1</a>
          <a onClick={() => history.push(''page2'') }>Page 2</a>
        </ul>
      </div>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <NavBar />
        <div>Other Content</div>
        {this.props.children}
      </div>
    )
  }
});

Answer 2

Nota: el aceptado está perfectamente bien, pero quería agregar un ejemplo de versión 4 porque son lo suficientemente diferentes.

Nav.js

  import React from ''react'';
  import { Link } from ''react-router'';

  export default class Nav extends React.Component {
    render() {    
      return (
        <nav className="Nav">
          <div className="Nav__container">
            <Link to="/" className="Nav__brand">
              <img src="logo.svg" className="Nav__logo" />
            </Link>

            <div className="Nav__right">
              <ul className="Nav__item-wrapper">
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path1">Link 1</Link>
                </li>
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path2">Link 2</Link>
                </li>
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path3">Link 3</Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      );
    }
  }

App.js

  import React from ''react'';
  import { Link, Switch, Route } from ''react-router'';
  import Nav from ''./nav'';
  import Page1 from ''./page1'';
  import Page2 from ''./page2'';
  import Page3 from ''./page3'';

  export default class App extends React.Component {
    render() {    
      return (
        <div className="App">
          <Router>
            <div>
              <Nav />
              <Switch>
                <Route exactly component={Page1} pattern="/path1" />
                <Route exactly component={Page2} pattern="/path2" />
                <Route exactly component={Page3} pattern="/path3" />
                <Route component={Page404} />
              </Switch>
            </div>
          </Router>
        </div>
      );
    }
  }

Alternativamente, si desea un navegador más dinámico, puede consultar los excelentes documentos de v4: https://reacttraining.com/react-router/examples/sidebar