如何找出 React 中正在渲染的 Router 组件？

Question

我有一个 Navbar 组件，我正在尝试使用 styled-components 以不同的 CSS 样式呈现它，以呈现正在呈现的组件路由。我如何检查该组件是否正在渲染？

const NavbarContainer = styled.div`
  height: 115px;
  font-family: 'Domine', serif;
  align-content: center;
  align-items: center;
  position: absolute;
  z-index: 4;
  width: 100vw;
  overflow: hidden;

  &:hover {
    background-color: white;
    color: black !important;
  }
`;

让我们说这个组件，我想在登录页面中将 position: absolute 更改为 position: static 但我希望在主页中将其保留为 position: absolute 。我怎样才能做到这一点？

Answer 1

一个想法是将您的组件包装在另一个组件中喜欢在登录页面

const NavWrapper = styled.div`
>div{
 position: static 
}
`
<NavWrapper>
<NavbarContainer/>
</NavWrapper>

Answer 2

您可以使用基于登录路径的条件样式来实现此目的

<Appbar style={{ position: pathname === '/login' ? 'static' : 'absolute' }}></Appbar>

Answer 3

创建一个特定于登录路由的 NavbarContainer 版本并覆盖 position 规则，并使用布局路由以适当的 layout/navbar 呈现适当的路由。

示例：

const NavbarContainer = styled.div`
  height: 115px;
  font-family: 'Domine', serif;
  align-content: center;
  align-items: center;
  position: absolute;
  z-index: 4;
  width: 100vw;
  overflow: hidden;

  &:hover {
    background-color: white;
    color: black !important;
  }
`;

const StaticNavbarContainer = styled(NavbarContainer)`
  position: static;
`;

...

import { Outlet } from 'react-router-dom';

const NavbarLayout = ({ children }) => (
  <>
    <NavbarContainer>{children}</NavbarContainer>
    <Outlet />
  </>
);

const StaticNavbarLayout = ({ children }) => (
  <>
    <StaticNavbarContainer>{children}</StaticNavbarContainer>
    <Outlet />
  </>
);

...

<Routes>
  <Route
    element={(
      <NavbarLayout>
        // ... render links here as children
      </NavbarLayout>
    )}
  >
    <Route path="/" element={<Home />} />
    // ... routes to render with absolute positioned navbar
  </Route>

  <Route
    element={(
      <StaticNavbarLayout>
        // ... render links here as children
      </StaticNavbarLayout>
    )}
  >
    <Route path="/login" element={<Login />} />
    // ... other routes with static positioned navbar
  </Route>

  // ... other routes without navbars
</Routes>

如何找出 React 中正在渲染的 Router 组件？

How to find out which Router component is being rendered in React?

css

reactjs

react-router

styled-components