CODEWITHSUNDEEP
reactjslayout
Alireza
Alireza

Reputation: 6868

Why other components does not render inside of Layout in ReactJS?

I have a structure as below in 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

Now inside of Layout.js I have:

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

My client.js is as below:

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

The problem is that when I navigate through links, it renders content of let's say archive after Footer:

enter image description here

NB: I'm in archive page is rendered after footer section

What is wrong here? And what should I do to render components inside of layout?

Upvotes: 0

Views: 1195

Answers (1)

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

Try something like below,

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

Upvotes: 3

Related Questions