CODEWITHSUNDEEP
javascripthtmlreactjsreact-router
SamYoungNY
SamYoungNY

Reputation: 6634

Content in between Header/Footer

I'm building a site where each page has a <TopNav>, <Footer> and a <Subfooter>.

As I understand it, the entry point of the app, should include these three components, and an additional component/s should render depending on the route the user is on.

I've built my entry point like so:

App.js

const App = () => (
  <div>
    <TopNav />
    <Footer />
    <Subfooter />
  </div>
)

index.js

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

The problem with the way I've structured this is that I can't render anything in between <TopNav> & <Footer>. Should I do something like this in App.js and somehow inject the proper components into <PageContent> based on the route?

App.js

const App = () => (
  <div>
    <TopNav />
    <PageContent />
    <Footer />
    <Subfooter />
  </div>
)

Also, all each component in app requires a router as they all contain <nav> - where should I be defining the <Router> for all three of these components?

What is the correct approach to adding any necessary component between the three listed in App.js - and where should the routing code go to dictate the behavior for all three of these components?

Upvotes: 2

Views: 534

Answers (1)

VivekN
VivekN

Reputation: 1602

One way of doing this could be:-

Routes.js

import React,{ Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import App from './components/app';
import SomeComponent from './components/some-component';
import AnotherComponent from './components/another-component';

const taskRouter = (
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={SomeComponent} />
            <Route path="/another" component={AnotherComponent} />
        </Route>
    </Router>
);

export default taskRouter;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Routes';
ReactDOM.render(<Router/>, document.getElementById('root'));

Finally inside App.js

const App = (props) => (
  <div>
    <TopNav />
    {props.children}
    <Footer />
    <Subfooter />
  </div>
)

All route components will render themselves inside props.children.

Hope that helps.

Upvotes: 2

Related Questions