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>

在页面导航时阻止标题菜单重新呈现 - reactjs

1 个答案: