使用单页时，如何在所有路线中同时添加header.html和footer.html？

Question

We currently have a header.html and a footer.html that we include in our base.html that is loaded in the / route of our website. We're using a single page design and thus we don't reload base.html at any time other than when initially loading the page. In base.html we have a div with an id that we use to load all our html content with jQuery to. The problem we're facing now is that fact that accessing a route directly bypasses the load of header, and thus our jQuesry-scripts and bootstrap etc., and then the page looks like crap and doesn't work properly. We figured we could remove the visual URL-change completely and use madeup route-names in our routes instead. But that feels like an overly complicated and not neccessarily secure way of doing it. Ideally we would like to be able to know if the request is not coming from where it's supposed to.

Any ideas of how this can be accomplished? Or do you generally just expect no one to go to /signup on their own?

Answer 1

I use a Nav component which renders the "chrome" around the page.

export class Nav extends Component {
  render = () => {
    return (
      <div>
        <rb.Navbar>
          <rb.Navbar.Header>
            <rb.Navbar.Brand>
              <a href="#">aktai</a>
            </rb.Navbar.Brand>
          </rb.Navbar.Header>
        </rb.Navbar>
        {this.props.children}
      </div>)
  }
}

I mount it to all routes in React Router:

const router = (
  <Router history={browserHistory}>
      <Route component={Nav}>
        <Route path="/folders" component={Folders}/>
      </Route>
  </Router>
)

You can also call it like:

<Nav>
  <h1>welcome to my site</h1>
  This is a place
</Nav>

Any component which renders this.props.children will work like that.