react-router全局标头

IT技术 javascript reactjs react-router
2021-03-29 08:43:12

我刚开始学习 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'));

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

在每个单独的页面组件中导入页眉组件是一个好习惯，或者我可以在我的<Router><myHeader/><otherRoutes/></Router>?

更新：

我想使用这样的东西：

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

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

import Routes from './components/Routes';

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

有人可以解释我吗？谢谢！

4个回答

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

布局组件

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

您可以保持路由不变，您的路由将呈现联系页面，然后呈现您的标题。

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

@SeanVieira 您认为哪个更有意义？
2021-05-30 08:43:12
@hiero 我想你的建议会起作用，在我看来，我认为如果你只想在所有页面上都有一个标题就可以了，但是如果以后你想添加一个页脚怎么办？那么你想在不同的页面上有不同的标题吗？等等，因为使用布局技术开始变得更加复杂将有助于使您的应用程序更有条理
2021-06-02 08:43:12
我认为制作一个 Routes 组件并使其像这样 <Header/><Routes/><Footer/> 没有更多相关性？
2021-06-10 08:43:12
也值得一提的替代方案（使用 React-Router 作为页面上的组件，将它与您的<Header>组件一起包装）。
2021-06-12 08:43:12
并且在主文件中我应该使用相同的结构进行路由，对吗？
2021-06-13 08:43:12

我发现这种方式很有用：

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;

归功于：大卫·克尔

应该怎么做才能在此处添加条件以隐藏登录时的标题？我们不能在路由器外使用withrouter。
2021-06-06 08:43:12
这包含很多内容，我没有看到与问题相关的构造函数、状态和东西变量。您的回答似乎or can I add the header component on my ...?用一个简单的“是的，我就是这样做的：”来回答这个问题： - 对吗？也许编辑是为了
2021-06-11 08:43:12

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

我也觉得有一个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>
);

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

研究这个解决方案。我想要一个每个页面可能拥有的可用命令列表，如果可以的话，我希望使用路由元数据来执行此操作 - 我知道您可以在 Vue 中执行此操作（我是新手）。谢谢你的建议！
2021-06-03 08:43:12
如果您的标头有面包屑，我假设它在 <Router> 组件中，我仍然可以使用钩子访问路由器上下文，对吗？
2021-06-14 08:43:12

用于强制刷新路由内的 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>
        )
    }
其它你可能感兴趣的问题
上一篇使用 React 处理 ajax 下一篇react路由和 django url 冲突