page-reactjsをナビゲートするときにヘッダーメニューを再レンダリングしないようにする

Question

ヘッダーコンポーネントでconsole.log（）を実行すると常にヘッダーコンポーネントをレンダリングしないようにしたいのですが、ページをナビゲートするときに起動します。ここにある私のコードです：// 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; 

Answer 1

は

のようなルートをリファクタリングしてみ

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