Réagir routeur de la barre de navigation exemple

Je suis un débutant dans Réagissent JS et souhaitez développer réagir routeur en fonction de navigation pour mon tableau de bord. La maquette est comme suit:

Mon app.js le code que j'ai créé pour essayer de routage est comme suit:

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'))

Comment puis-je créer la navigation comme le montre la maquette ?

Quelle est la question? Voulez-vous savoir comment créer un composant? Ce n'routage avoir à faire avec cela?
Je voudrais créer la navigation à l'aide de réagir routeur comme indiqué dans la maquette.
Avez-vous essayé Google? Votre question n'a pas un problème spécifique qui peut être résolu, mais plutôt d'un problème très général. Il suffit de regarder comment créer un composant et vous êtes bon pour aller!
jetez un oeil à npmjs.com/package/react-nav-bar il peut rendre votre vie un peu plus facile

InformationsquelleAutor KarthikJ | 2016-01-05

35

Oui, Daniel est correct, mais pour élargir sa réponse, votre application principale composante aura besoin d'avoir une barre de navigation composant à l'intérieur. De cette façon, lorsque vous effectuez le rendu de l'application principale (toute la page sous le '/' chemin d'accès), il serait également afficher la barre de navigation. Je devine que vous ne voudriez pas que votre page de connexion pour afficher la barre de navigation, de sorte que ne devrait pas être imbriquée composant, et devrait plutôt être par lui-même. Si vos itinéraires pourrait finir par ressembler à cela:
```
<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>
```
Et les autres composants ressemblerait à quelque chose comme ceci:
```
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>
    )
  }
});
```
- Pourquoi utiliser de l'histoire.pousser au lieu de <Lien>?
- d'où l'histoire se charge dans?
- react-router s'appuie sur history, de sorte qu'il entre en scène avec cette ligne import { Router, Route, Link } from 'react-router'. Au lieu d'utiliser history.push pour les liens explicitement, vous pouvez également utiliser les réagissent-routeur <Link> de l'élément.
InformationsquelleAutor JTaub

Note accepté est parfait - mais je voulais ajouter une version4 exemple parce qu'ils sont assez différentes.

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>
      );
    }
  }

Sinon, si vous voulez un plus nav dynamique, vous pouvez regarder l'excellent v4 docs: https://reacttraining.com/react-router/web/example/sidebar

L'actuel v4 routeur ne permet qu'un seul enfant. J'ai corrigé cela dans mon application en enveloppant le Routeur Nav/Commutateur enfants avec un seul <div/>. J'ai eu ensuite pour mettre Nav dans une <Route/> avant de Basculer de sorte qu'il recevrait route des accessoires de l'histoire,d'un match, et l'emplacement. Veuillez mettre à jour votre réponse.
Comment cela fonctionne, si vous avez une page de connexion? Sans doute ne voulez pas de barre de navigation affiche sur la page de connexion. est-il un moyen de contourner cela?
Pourriez-vous poser une autre question et le lien ici - qu'il serait trop difficile de répondre dans les commentaires
Merci @Glenn mis à jour.
comment puis-je régler conditionnelle "active" de la classe dans la barre de navigation?
Que faire si je veux que la barre de navigation sur chaque page, mais pas en haut de la page à la page 1? Par exemple, je veux que ma barre de navigation ci-dessous le jumbotron sur la page d'accueil/page 1.
Soulever une nouvelle question s'il vous plaît, trop difficile de répondre dans les commentaires

InformationsquelleAutor Chris

Vous devez vous connecter pour publier un commentaire.