CODEWITHSUNDEEP
reactjsreact-router
Sydney Loteria
Sydney Loteria

Reputation: 10461

Prevent header menu to re render when navigating through page - reactjs

I would like to ask if its possible not to re render the header component when navigating through page, because when I do console.log() in the header component it always fire up when navigating through page. Here's is my code:

// Route.jsx

<Route component={HeroesPage}>
    <Route path="/reactjs" component={HeroesComponent}></Route>
    <Route path="/reactjs2" component={HeroesCreateComponent}></Route>
</Route>

// HeroesPage.jsx

import React from 'react';

import Header from "components/common/Header.jsx";
class HeroesPage extends React.Component {
    render() {
        return (
            <div>
                <Header />
                { this.props.children }
            </div>
        );
    }
}

export default HeroesPage;

// Header.jsx

import React from "react";
import { Link } from 'react-router';

class Header extends React.Component {
    componentDidMount(){
        console.log('header loaded');
        // If I will add an api call here, it will fetch to the server everytime I navigate to the page
    }
    render(){
        return(
            <ul className="nav nav-tabs">
                <li><Link to="/reactjs">Reactjs 1</Link></li>
                <li><Link to="/reactjs2">Reactjs 2</Link></li>
            </ul>
        );
    }
}


export default Header;

Upvotes: 2

Views: 4369

Answers (1)

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

Try refactoring routes like

<Route path="/" component={HeroesPage}>
    <Route path="reactjs" component={HeroesComponent} />
    <Route path="reactjs2" component={HeroesCreateComponent} />
</Route>

Upvotes: 2

Related Questions