webentwicklung-frage-antwort-db.com.de

Reagieren Sie den globalen Header des Routers

Ich habe gerade angefangen, React zu lernen. Ich versuche, einen SPA-Blog mit einem global positionierten festen Header zu erstellen.

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

Jede Route hat also den gleichen Header und von meinem kantigen Hintergrund würde ich den Header außerhalb der Ui-Ansicht verwenden.

Es empfiehlt sich, die Kopfkomponente in jede einzelne Seitenkomponente zu importieren. Oder kann ich die Kopfkomponente in meinem <Router><myHeader/><otherRoutes/></Router> hinzufügen?

Update:

Ich dachte daran, so etwas zu verwenden:

Routenkomponente, in der ich meine Routen definiere:

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

Und dann in der Hauptdatei "Index.js" möchte ich Folgendes darstellen:

import Routes from './components/Routes';

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

Kann mir jemand erklären? Vielen Dank!

15
Hiero

Aus meiner Erfahrung kann es gut sein, eine Layoutkomponente für Ihre Seite zu definieren, etwa ... 

Layoutkomponente

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

Anschließend importieren Sie das Layout in jede Ihrer Seitenkomponenten ...

Komponente der Kontaktseite

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

Und Sie können Ihre Route gleich belassen, Ihre Route rendert die Kontaktseite und wiederum die Kopfzeile.

Auf diese Weise erhalten Sie die Kontrolle über sich wiederholende Elemente, die sich auf mehreren Seiten befinden. Wenn Sie eine oder zwei geringfügig andere Seiten benötigen, können Sie einfach ein anderes Layout erstellen und dieses verwenden.

33
Geraint

Ich finde diesen Weg nützlich:

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;

kredit geht an: David Kerr

1
Mawaheb