时间戳

首页 > 解决方案 > 在 ReactJs 中重新渲染 Header

react-native - 在 ReactJs 中重新渲染 Header

问题描述

我有 index.js 如下代码：

<relevant imports>

function Header(){
       return(<HeaderComponent/>);
}

ReactDOM.render(
<div>
    <Router>
        <div>
            <Switch>
                <Route path="/page1" component={page1} />
                <Route path="/page2" component={page2} />
                <Route path="/page3" component={page3} />
                <Route path="/home" component={PortfolioPageComponent} />
                <Route path="/" component={WelcomePage} />
            </Switch>
        </div>
    </Router>
</div>,
    document.getElementById('root')
);
ReactDOM.render(<Header />, document.getElementById('page-header'));

现在，当我打开我的应用程序时，它会转到WelcomePage。在这个组件中，我有授权逻辑。身份验证完成后，页面将重定向到，PortfolioPageComponent但标题组件不会重新加载。

如何在每次重定向时也重新渲染 Header 组件？

标签： react-nativereact-router

解决方案

将 header 组件放在 switch 组件之外允许它与每个路由一起呈现。这样，无论您导航到哪条路线，都将始终呈现开关之外的组件。这可能包括开关组件之前的页眉和之后的页脚。

推荐阅读