样式化组件 React router v6

Question

const StyledNavLink = styled(NavLink)`
  text-decoration: ${(props) => {
    console.log(props.style);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }};
  &:hover {
    text-decoration: underline;
  }
`;

export default function BasicExample() {
  return (
    <Router>
      <Navbar>
        <NavItems>
          <NavItem>
            <NavLink
              to="/"
              end={true}
              style={({ isActive }) => {
                console.log(isActive + "About");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              Home
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              to="/about"
              style={({ isActive }) => {
                console.log(isActive + "About");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              About
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              to="/dashboard"
              style={({ isActive }) => {
                console.log(isActive + "Dashboard");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              Dashboard
            </NavLink>
          </NavItem>
        </NavItems>
      </Navbar>
      <Routes>
        <Route path="/" caseSensitive={false} element={<Home />}></Route>
        <Route path="/about" caseSensitive={false} element={<About />}></Route>
        <Route path="/dashboard" caseSensitive={false} element={<Dashboard />}></Route>
      </Routes>
    </Router>
  );
}

我如何才能抽象出用于设置活动 link 样式的逻辑以表示 StyledNavLink 样式组件，我尝试使用 StyledNavLink 代替 Navlink 但它不起作用。我不确定我可能会遗漏什么。如果我在 StyledNavLink 中调出 props.style，那么它始终是未定义的。

Answer 1

我对此不太确定，但我在使用 styled-components 对 NextJS 的 Link 进行样式设置时遇到了类似的问题。所以也许这也可以在这里工作。

解决方法

您可以创建一个 LinkWrapper 样式的组件，将 link 与 div、span 等任何默认组件包装起来，这不会产生任何其他问题到你正在尝试做的事情，然后设置 Navlik 的样式，这实际上将成为 a 标签，因此你可以嵌套设置 a 标签 (NavLink) 使用LinkWrapper.

const LinkWrapper= styled.div`
  a {
    display: flex;
    justify-content: ${props => props.propToPass ? 'flex-start' : 'center'};
    align-items: center;
  }
`;

function App(props) {
  return(
    <LinkWrapper propToPass={/**/}>
      <Link to={props.link}>
        {props.name}
      </Link>
    </LinkWrapper>
  );
}

试试这个，我认为这是一个解决方案

Answer 2

const StyledNavLink = styled(NavLink)`
  text-decoration: ${(props) => {
    console.log(props.style);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }};
  &:hover {
    text-decoration: underline;
  }
 &[aria-current] {
    color: red;
  }
`;

我只需要检查 aria-current 属性是否存在，现在如果我用 StyledNavLink 替换 NavLink，一切都会按预期工作

或者，如下所示，可以检查是否存在活动 class

const StyledNavLink = styled(NavLink)`
    text-decoration: ${(props) => {
    console.log(props);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }}; 
  &:hover {
    text-decoration: underline;
  }
 &[class*="active"] {
    color: red;
  }
`;

样式化组件 React router v6

Styled components React router v6

reactjs

styled-components

react-router-dom

解决方法