web-dev-qa-db-fra.com

En-tête et pied de page ReactJS

J'essaie de créer un composant Layout qui rendrait le Header et Footer. Pour que je puisse plus tard utiliser le Layout like

<Layout> ... </Layout>

J'ai utilisé le routage dans l'en-tête et le pied de page, évidemment. Pour ce faire, je dois utiliser

<Router history...
 <Route path...

Quand je le fais l'un après l'autre (pour l'en-tête et le pied de page: bien que je pense que ce soit faux) dans mon layout.js. Ça marche. L'en-tête et le pied de page sont affichés dans le navigateur. Cependant, ils ne fonctionnent pas correctement . Lors du rafraîchissement, le pied de page disparaît et parfois les deux, l'en-tête et le pied de page. Je crois fermement que le rendu du routeur l'un après l'autre est la raison de ce dysfonctionnement, mais je ne peux pas comprendre la bonne approche. De plus, je ne veux pas utiliser les extraits suivants

header.js

import React from 'react';
import {Link} from 'react-router'
import {Navbar, NavItem} from 'react-materialize';

export default React.createClass({
  render(){
    return (
    <div>
      <Navbar brand='logo' right>
        <NavItem><Link to="/Home" activeClassName="active">Home</Link></NavItem>
        <NavItem><Link to="/Sign-In" activeClassName="active">Sign In</Link></NavItem>
        <NavItem><Link to="/Register" activeClassName="active">Register</Link></NavItem>
      </Navbar>
      {this.props.children}
    </div>
    )
  }
})

footer.js

import React, {Component} from 'react';
import {Link} from 'react-router'
import {Footer} from 'react-materialize';
import '../../resource/template.css'


class RT_Footer extends Component{
  render(){
    return (
    <div>
      {this.props.children}
      <Footer copyrights="&copy; 2015 Copyright Text"
          moreLinks={
            <Link className="grey-text text-lighten-4 right" href="#!">More Links</Link>
          }
          links={
            <ul>
              <li><Link to="/About Us" className="grey-text text-lighten-3">About Us</Link></li>
              <li><Link to="/Terms & Conditions" className="grey-text text-lighten-3">Terms & Conditions</Link></li>
              <li><Link to="/Help" className="grey-text text-lighten-3">Help</Link></li>
              <li><Link to="/Contact Us" className="grey-text text-lighten-3">Contact Us</Link></li>
            </ul>
          }
          className='example'
      >
        <h5 className="white-text">Footer Content</h5>
        <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </Footer>
    </div>
    );
  }
}
export default RT_Footer;

layout.js

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

class Layout extends Component {
  render(){
    return (
      <div>
      <span>
        <Router history={browserHistory}>
          <Route path="/" component={Header}>
           <Route path="/Home" component={Home}/>
           <Route path="/Sign-In" component={SignIn}/>
           <Route path="/Register" component={Register}/>
          </Route>
        </Router>
      </span>
      <span>
        <Router history={browserHistory}>
          <Route path="/" component={RT_Footer}>
           <Route path="/About Us" component={About}/>
           <Route path="/Terms & Conditions" component={TC}/>
           <Route path="/Register" component={Register}/>
          </Route>
        </Router>
      </span>
      </div>
    );
  }
}
export default Layout;

Ensuite, j'ai simplement rendu Layout in index.js

javascriptreactjsheaderfootermaterialize
7
Roy

Je vous suggère de ne pas rendre le composant Router deux fois (je n'ai pas vérifié mais vous ne pouvez probablement pas).

Alors, comment fonctionne le composant Router:

  • Vous donnez au routeur un historique (via les accessoires d'historique), ici vous utilisez le browserHistory de la même bibliothèque qui est très bien.
  • Ensuite, vous définissez tous les itinéraires existants pour votre application en utilisant le composant Route avec un chemin d'accès et le composant à charger si l'URL du navigateur correspond à cette propriété de chemin d'accès.

Maintenant, dans votre cas, je vous suggère de faire quelque chose comme ça:

app.js

import {Router, Route, browserHistory} from 'react-router'
import Layout from './components/Layout'
// Import here all the required components used by the router such as SignIn, Register, ...

render(
    <Layout>
        <Router history={browserHistory}>
            <Route path="/" component={RT_Footer}>
            <Route path="/About Us" component={About}/>
            <Route path="/Terms & Conditions" component={TC}/>
            <Route path="/Register" component={Register}/>
           // Add as many Route components as needed
        </Router>
    </Layout>,
    document.getElementById('react-anchor')

Ensuite, votre fichier de mise en page devrait ressembler à ceci:

layout.js

import Header from './Header'
import Footer from './Footer'
import React, {Component} from 'react'

class Layout extends Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}

Et dans votre composant En-tête et Pied de page, restituez ce que vous voulez, pour fournir un lien pour charger le composant demandé que vous pouvez utiliser à partir de react-router ou d'une autre manière que la bibliothèque offre (voir leur documentation)

Modifier:

Attention au chemin de l'itinéraire, comme "Conditions générales" n'est probablement pas un chemin valide

17
Quentin