React,链接中prop`component`的无效值

问题描述 投票:2回答:1

我已经阅读了有关此问题的另一个问题,但是在我的情况下,我不知道如何处理。我收到此警告:

警告:标签上属性component的值无效。从元素中删除它,或者传递一个字符串或数字值以将其保留在DOM中。

<Link component={MyLink} to='/summary-upload-tco'>
  <Button>asdas</Button>}
</Link>

const MyLink = props => <Link to={props.to} {...props} />;

然后有一种方法可以将道具component传递给具有原样定义的MyLink吗?

reactjs react-router-dom
1个回答
1
投票

Link组件不接受component道具。如果您要创建自己的自定义Link,则可以将其包装并使用useRouteMatch钩子作为辅助工具:

示例取自react-router's DOCS

// This example show how you could create a custom
// <Link> that renders something special when the URL
// is the same as the one the <Link> points to.

export default function CustomLinkExample() {
  return (
    <Router>
      <div>
        <OldSchoolMenuLink
          activeOnlyWhenExact={true}
          to="/"
          label="Home"
        />
        <OldSchoolMenuLink to="/about" label="About" />

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function OldSchoolMenuLink({ label, to, activeOnlyWhenExact }) {
  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact
  });

  return (
    <div className={match ? "active" : ""}>
      {match && "> "}
      <Link to={to}>{label}</Link>
    </div>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.