Question

我怀疑这更多是关于React（或JS）而非路由。

为避免道具碰撞，我使用了const中定义的forwardRef。我想通过父组件传递的道具设置“ to”，但我无法完成这项工作。在下面的示例中，显示为to={props.toUrl}的地方只有在to='/hello'时才有效。我该怎么做，以便可以使用Demo组件中的ButtonRouter组件？

import React from "react";
import { MemoryRouter as Router } from "react-router";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";

const CollisionLink = React.forwardRef((props, ref) => (
  <Link innerRef={ref} to={props.toUrl} {...props} />
));

function ButtonRouter(props) {
  return (
    <Router>
      <Button component={CollisionLink}>Routing w/o props collision</Button>
    </Router>
  );
}

export default function Demo() {
  return <ButtonRouter toUrl="/hello" />;
}

Answer 1

我认为您可能缺少ButtonRouter中的道具：

function ButtonRouter(props) {
  return (
    <Router>
      <Button component={(routerProps) => <CollisionLink {...routerProps} {...props} />}>Routing w/o props collision</Button>
    </Router>
  );
}

通过const中的prop对路由器进行``to''反应

1 个答案: