首页 文章

反应路由器全局标头

提问于
浏览 次
13

我刚开始学习React，我正在尝试创建一个SPA博客，它有一个全球定位的固定 Headers .

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

所以，每条路线都有相同的 Headers ，从我的角度背景，我会在ui-view之外使用 Headers .

在每个单独的页面组件中导入 Headers 组件是一个很好的做法，还是可以在 <Router><myHeader/><otherRoutes/></Router> 上添加 Headers 组件？

Update:

我想用这样的东西：

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

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

有人可以解释一下吗？谢谢！

javascript reactjs react-router

2 回答

  • 0

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

    布局组件

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

    并且您可以保持路由相同，您的路线将呈现联系页面，然后将呈现您的 Headers .

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

    回复于
  • 29

    我发现这种方式很有用：

    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

    回复于

相关问题