Question

我有一个显示FM电台列表的组件。我想将数据传递给各个组件，因为大多数数据已经存在。但是，单击名为Click me的按钮后，我无法将页面重定向到单个FM页面。

我在stackoverflow和其他链接（例如， react router difference between component and render https://medium.com/@cristi.nord/props-and-how-to-pass-props-to-components-in-react-part-4-2cc375c17a23

他们都指出我正确地遵循了文档，现在我不确定如何解决此问题。我知道我可以使用路由器挂钩来解决此问题，但是我试图了解为什么我不能像这样解决它。

Sandbox

Answer 1

React-Router用于根据您所在的URL有条件地呈现组件。

为此，您可以这样声明路线：

<Switch>
    <Route path="/some-url">
        <MyComponent />
    </Route>
     <Route path="/some-other-url">
        <MyComponent />
    </Route>
<Switch>

然后您可以使用<Link>重定向到特定的URL或执行以下操作：

const history = useHistory();
const onClick = () => {
    history.push("/some-other-url");
};

Answer 2

您的onClick返回一个Route组件。相反，您应该已经渲染了此组件，并且可以渲染Redirect component，调用history.push或仅使用Link组件。

如何通过反应路由器将道具传递到另一个组件？

2 个答案: