全球反应路由器 header

Question

我刚开始学习 React，我正在尝试制作一个 SPA 博客，它具有固定的全局定位 header。

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

所以，每条路线都有相同的 header，从我的 angular 背景来看，我会在 ui-view 之外使用 header。

在每个单独的页面组件中导入 header 组件是一个好习惯，或者我可以在我的 <Router><myHeader/><otherRoutes/></Router> 上添加 header 组件吗？

更新：

我想用这样的东西：

路由组件，我在其中定义我的路由：

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

然后在主 Index.js 文件上，我想渲染如下内容：

import Routes from './components/Routes';

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

谁能给我解释一下？谢谢！

Answer 1

根据我的经验，为您的页面定义布局组件可能会很好，例如...

布局组件

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

然后您将布局导入每个页面组件...

联系页面组件

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

并且您可以保持路由不变，您的路由将呈现联系人页面，进而呈现您的 header。

通过这种方式，您可以控制多个页面上的重复内容，如果您需要一个或两个略有不同的页面，您可以创建另一个布局并使用它。

Answer 2

我觉得这种方式很有用：

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;

致谢：David Kerr

Answer 3

问题已经得到解答，但我在这里展示另一种方法并说明为什么我更喜欢这种方法。

我也觉得有Layout组件是好事

function Layout (props) {
  return (
    <div>
      <Header/>
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

但不是将它渲染到每个路由组件中，您可以将它作为父路由渲染一次。

return (
  <Router>
    <Layout>
      <Switch>
        <Route path="/about">
          <About/>
        </Route>
        <Route path="/contact">
          <Contact/>
        </Route>
        <Route path="/">
          <Home/>
        </Route>
      </Switch>
    </Layout>
  </Router>
);

这很好，因为在大多数情况下您不会在布局上浪费时间，如果您有不同的布局，您只需要在布局组件中工作。

Answer 4

强制刷新路由内的Header。使用 forceRefresh={true}

const Routing = () => {
        return(
            <BrowserRouter forceRefresh={true}>
            <Header/>
            <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/list/:id" component={ListingApi}/>
                    <Route path="/details/:id" component={HotelDetails}/>
                    <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                    <Route path="/viewBooking" component={ViewBooking}/>
                    <Route exact path="/login" component={LoginComponent}/>
                    <Route  path="/signup" component={RegisterComponent}/>
            </Switch>
            <Footer/>
            </BrowserRouter>
        )
    }

全球反应路由器 header

React router global header

javascript

reactjs

react-router