How to display two components?

Question

JavaScript

There are 4 components and they should be in this order:

<div className="wrapper">
  <Header />
  <Stat />
  <Middle />
  <Footer />
</div>

Header and Footer are static on each page, but Stat and Middle can change, respectively, on the main page I need to display everything in the same order as at the top, I do it like this:

<div className="wrapper">
        <Header />
        <Router history={browserHistory}>
          <Route path="/" component={Stat} />
          <Route path="/" component={Middle} />
  				</Router>
  				<Footer />
      </div>

but it doesn't work, please explain

Answer 1

Calling a router somewhere inside a component is not a good idea (although there may be valid exceptions).
In your case, make two components - Layout (which will define the components common to all pages) and Home (which will be responsible for the main page). In the simplest case, it would look like this:

const Layout = (props) => (
  <div className="wrapper">
    <Header />
    {props.children}
    <Footer />
  </div>
)

// Поскольку нам нужно вернуть один компонент - обернем Stat и Middle в div
const Home = () => (
  <div>
    <Stat />
    <Middle />
  </div>
)

render((
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Home} />
    </Route>
  </Router>
), reactRootElement)