我已经阅读了有关此问题的另一个问题,但是在我的情况下,我不知道如何处理。我收到此警告:
警告:标签上属性component
的值无效。从元素中删除它,或者传递一个字符串或数字值以将其保留在DOM中。
<Link component={MyLink} to='/summary-upload-tco'>
<Button>asdas</Button>}
</Link>
和
const MyLink = props => <Link to={props.to} {...props} />;
然后有一种方法可以将道具component
传递给具有原样定义的MyLink吗?
Link
组件不接受component
道具。如果您要创建自己的自定义Link
,则可以将其包装并使用useRouteMatch
钩子作为辅助工具:
// 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>
);
}