Javascript 反应路由器全局报头

我刚刚开始学习React，我正在尝试制作一个SPA博客，它有一个全球定位的固定标题

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

从“React”导入React；
从'react dom'导入{render}；
//在此处导入其他组件
渲染((
)，document.getElementById（'app'）；

所以，每个路由都有相同的头，从我的角度背景来看，我会在ui视图外部使用头

在每个单独的页面组件中导入页眉组件是一种很好的做法，或者我可以在我的

中添加页眉组件吗

更新：

我想用这样的东西：

Routes组件，其中我定义了我的路线：

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

类路由扩展React.Component{
render（）{
返回(
)
}
}

然后在main Index.js文件中，我想呈现如下内容：

import Routes from './components/Routes';

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

从“./components/Routes”导入路由；
渲染((
标题
)，document.getElementById（'app'）；

---

有人能给我解释一下吗？谢谢

根据我的经验，为页面定义一个布局组件是很好的，比如

布局组件

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

render（）{
返回(
{this.props.children}
/*您希望在使用此布局的每个页面上显示的任何其他内容*/
);
}

然后将布局导入到每个页面组件中

联系人页面组件

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

render（）{
返回(
/*将此页面上所需的全部内容放在布局组件中*/
);
}

你可以让你的路线保持不变，你的路线将呈现联系人页面，然后呈现你的标题

---

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

我发现这种方式很有用：

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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/components/Header”导入标题；
从“/components/Home”导入主页；
从“/components/Dashboard”导入仪表板；
从“/components/Footer”导入页脚；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
东西：东西；
};
}
render（）{
设{stuff}=this.state；
返回(
//路由器的包装器，来自BrowserRouter的给定别名
//此组件将始终可见，因为它位于特定管线之外
//在根路径中，显示此组件
}/>//在路径“/dashboard”处，显示此其他组件
//这也是永久安装的
);
}
}
导出默认应用程序；

---

功劳归于：

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

我还认为有一个布局组件是件好事

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

功能布局（道具）{
返回(
{props.children}
);
}

但不必将其渲染到每个管线组件中，只需将其作为管线的父级渲染一次即可

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

返回(
);

---

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

用于强制刷新路由内部的标题。使用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>
        )
    }

const路由=（）=>{
返回(
)
}

在主文件中，我是否应该使用相同的路由结构，对吗？我认为制作一个Routes组件并使其如此并不重要？值得一提的是另一种选择（使用React Router作为页面上的一个组件，用

组件包装它）.@SeanVieira你认为哪一个更有意义？@hiero我想你的建议行得通，在我看来，如果你只想在所有页面上添加一个页眉，我认为它也行，但如果以后你想添加一个页脚呢？那么你想在不同的页面上有不同的标题吗？当它开始变得越来越复杂时，使用布局技术将有助于使你的应用程序更具组织性。这包含了很多绒毛，我没有看到与问题相关的构造函数、状态和填充变量。您的答案似乎回答了

问题，或者我可以在我的…？

问题中添加标题组件，只需简单的“是的，我就是这样做的：”-正确吗？可能需要进行编辑。在这里添加一个条件以在登录时隐藏标题，应该怎么做？我们无法在路由器外部使用withrouter。正在研究此解决方案。我想要一个每个页面可能拥有的可用命令列表，如果可以的话，我希望使用路由元数据来执行此操作-我知道您可以在Vue中执行此操作（我是新手）。谢谢你的建议！如果你的头上有一个面包屑，我假设它在组件中，我仍然可以用钩子访问路由器上下文，对吗？