CODEWITHSUNDEEP
reactjsreact-router-dom
Md Zafar
Md Zafar

Reputation: 11

How to Render different components in fixed layout

I have created separate sidebar, header and content page using react js. but how to render different-pages on the side-bar menu click in the same content container

I am using this code for display menu header and a section on the main page but I am unable to open another page in the same section 

import React, { Component } from 'react';
import Header from './header';
import SideBar from './menu';
import Content from './content';

class App extends Component {
render() {
return ( <div>
<Header />
<SideBar />
<Content />
</div>

);
}
}

export default App;

Upvotes: 0

Views: 448

Answers (1)

Naveen Jain
Naveen Jain

Reputation: 1072

For rendering different pages (serving different routes) in same layout .
Using router is a proper way of achieve that feature.

You can use routers in any number of components you want.

class App extends Component {
    render() {
        return ( 
            <div>
                <Header />
                <SideBar />
                    <div id=#content>
                        <Switch>

                            <Route path="/page1" component={page1} />

                            <Route path="/page2" component={page2} /> 

                        </Switch>
                    </div>
            </div>

            );
        }
    }

    export default App;

Upvotes: 1

Related Questions