web-dev-qa-db-fra.com

En-tête global du routeur de réaction

Je viens juste de commencer à apprendre à réagir, j'essaie de créer un blog sur SPA, qui a un en-tête global positionné.

import React from 'react';
import { render } from 'react-dom';
// import other components here

    render((
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/Contact" component={Contact} />
        <Route path="*" component={Error} />
      </Router>
    ), document.getElementById('app'));

Donc, chaque route a le même en-tête et de mon fond angulaire, je voudrais utiliser en-tête en dehors de ui-view.

Il est recommandé d’importer le composant d’en-tête dans chaque composant de page individuel ou puis-je ajouter le composant d’en-tête à mon <Router><myHeader/><otherRoutes/></Router>?

Mettre à jour:

Je pensais utiliser quelque chose comme ceci:

Composant itinéraires, où je définis mes itinéraires:

class Routes extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <IndexRoute component={Home} />
                <Route path="/studio" component={Studio} />
                <Route path="/work" component={Work} />
                <Route path="*" component={Home} />
            </Router>
        )
    }
}

Et puis sur le fichier Index.js principal, je voudrais rendre quelque chose comme:

import Routes from './components/Routes';

render((
   <div>
      <div className="header">header</div>
      <Routes />
   </div>
), document.getElementById('app'));

Quelqu'un peut m'expliquer? Merci!

javascriptreactjsreact-router
15
Hiero

D'après mon expérience, il peut être utile de définir un composant de présentation pour votre page, par exemple ... 

Composant de mise en page

render() {
    return(
       <div>
          <Header />
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

Vous importez ensuite la mise en page dans chacun de vos composants de page ...

Composant de la page de contact

render() {
    return (
        <Layout>
           <ContactComponent />
           /* put all you want on this page within the layout component */
        </Layout>
    );
}

Et vous pouvez laisser votre itinéraire identique, votre itinéraire affichera la page de contact et, à son tour, rendra votre en-tête.

De cette façon, vous aurez le contrôle des éléments répétitifs qui figureront sur plusieurs pages. Si vous avez besoin d'une ou deux pages légèrement différentes, vous pouvez simplement créer une autre présentation et l'utiliser.

33
Geraint

Je trouve cette voie utile:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from "./components/Header";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import Footer from "./components/Footer";
class App extends Component {
  constructor() {
    super();
    this.state = {
      stuff: stuff;
    };
  }
render() {
 let { stuff } = this.state;
 return (
  <Router> //wrapper for your router, given alias from BrowserRouter
   <div className="App">
    <Header /> //this component will always be visible because it is outside of a specific Route
    <Route exact path="/" component={Home}/>  //at the root path, show this component
    <Route path="/dashboard" component={()=><Dashboard stuff={stuff} />}/>  //at the path '/dashboard', show this other component
    <Footer /> //this is also permanently mounted
   </div>
  </Router>
 );
 }
}
export default App;

crédit va à: David Kerr

1
Mawaheb