Pourquoi les autres composants ne sont pas rendus dans Layout dans ReactJS?

Question

j'avoir une structure comme ci-dessous dans React:

client.js // routes are defined here and rendered app 

    components // a directory with all header, footer, layout, etc components 
    | 
    \____ Header.js 
    \____ Layout.js 
    \____ Nav.js 
    \____ Setting.js 

    index.html 

maintenant à l'intérieur de Layout.js je:

import React from 'react'; 
import Footer from './Footer'; 
import Nav from './Nav'; 
import { Link, NavLink } from "react-router-dom"; 

export default class Layout extends React.Component { 
    constructor() { 
     super(); 
    } 
render() { 
    return (
    <div style={{textAlign: 'center'}}> 
     <Nav /> 
     <div className="container" style={{marginTop: '60px'}}> 
       {this.props.children} 
     </div> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

Mon client.js est comme ci-dessous:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Archive from './components/Archive.js'; 
import Layout from './components/Layout.js'; 
import Featured from './components/Featured.js'; 
import Setting from './components/Setting.js'; 
import { HashRouter, Route, Link } from 'react-router-dom'; 


ReactDOM.render(
     (<HashRouter> 
       <div> 
         <Route path="/" component={Layout} /> 
         <Route path="/archive/:aid?" component={Archive} /> 
         <Route path="/featured" component={Featured} /> 
         <Route path="/setting" component={Setting} /> 
       </div> 
     </HashRouter>), 
document.getElementById('app')); 

Le problème est que lorsque Je navigue à travers les liens, il rend le contenu de archive après Footer:

NB: I'm in archive page est rendu après l'article de bas de page

Quel est le problème ici? Et que dois-je faire pour rendre les composants à l'intérieur de la mise en page?

Answer 1

Essayez quelque chose comme ci-dessous,

<Layout> 
    <Route path="/archive/:aid?" component={Archive} /> 
    <Route path="/featured" component={Featured} /> 
    <Route path="/setting" component={Setting} /> 
</Layout>