React-router：导航到新页面后如何调整标题大小？答案

【问题标题】：React-router: How to resize header after navigating to new page?React-router：导航到新页面后如何调整标题大小？
【发布时间】：2021-04-16 23:24:36
【问题描述】：

我有一个带有标题组件的 react-router 应用程序，当位于“/home”路径时，它占据了页面的整个高度。当我导航到新路径“/foo”时，我需要更改标题的高度。

当我通过在浏览器中输入网址直接加载任一页面时，它具有正确的高度：

100vh 用于 localhost:3000/home
15vh 用于 localhost:3000/foo

但是，当我使用以下代码从 /home 导航到 /foo 时，URL 会正确更改，但 DOM 不会重新呈现。 header 仍然有 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>
  );
}

Home.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>
    );
};

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

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

【讨论】：

将此标记为已接受的答案，因为它解释了我的代码有什么问题。然而，我最终做的只是使用 redux 来跟踪 isExpanded 变量，因此导航和调整大小的逻辑是分开的

【解决方案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，但如果你只有一个组件，你可以跳过它。

【讨论】：

感谢您的回复，但不幸的是，这对我不起作用