React路由器:导航到新页面后如何调整标题大小

Question

我有一个react路由器应用程序，它有一个标头组件，当位于'/home'路径时，它占据了页面的整个高度。当我导航到一个新路径"/foo"时，我需要更改标头的高度。

当我通过在浏览器中键入url直接加载任一页面时，它的高度正确：

• 100vh，本地主机：3000/home
• 15vh表示localhost:3000/foo

但是，当我使用以下代码从/home导航到/foo时，URL会正确更改，但DOM不会重新呈现。标头的高度仍然为100vh，并且DOM不包含Foo组件。

App.js

const App = () => {
return (
<Provider store={store}>
<Router>
<Header />
<Switch>
<Route path='/home' component={null}/>
<Route path='/foo' component={Foo}/>
</Switch>
</Router>
</Provider>
);
}

主页.js

const Home = () => {
// ... some more code
const navigate = useCallback(to => {
history.push(to);
}, []);
// ... some more code
};

Header.js

const Header = () => {
const { pathname } = useLocation();
const style = pathname === '/home'
? { height: '100vh'}
: { height: '15vh'}
return (
<div style={style}>
{ /* ...some more code */ }
</div>
);
};

Foo.js

const Foo = () => {
return (
<div>
Foo...
</div>
);
};

Answer 1

由于标头在Switch外部，因此不会重新渲染。因此，更改路由不会重新触发标头。您必须在Home和Foo组件中导入标头，以便在更改路径时重新渲染。

Answer 2

我怀疑问题在于更改路径时不会触发重绘。

我建议在标题中使用React Routers的Route组件(假设额外的div不是问题(。

所以它看起来是这样的：

const HeaderInternal = () => {
return { /* ... some header code */ }
}
const Header = () => {
return (
<>
<Route path='/home'><div style={{ height: '100vh'}}><HeaderInternal /> </div></Route>
<Route path='/foo'><div style={{ height: '15vh'}}><HeaderInternal /> </div></Route>
</>
);
};

我还没有直接测试过这一点，但无论何时切换页面，Route组件都应该强制进行重绘。HeaderInternal只是DRY，但如果你有一个单独的组件，你可以跳过它。