无法使用react-router-dom访问url

Question

我导入了这个库:

import { Redirect } from 'react-router-dom';

我有这样的代码:

const test =  () => {
return <Redirect to="https://www.google.fr/" />
}
};

使用按钮:

<Button variant="outline-success" onClick={() => test()}>Search</Button>

当我点击那个按钮时，没有效果…

你能帮我一下吗?

谢谢你!

Answer 1

首先，这不是Redirect应该如何工作。你应该重定向到内部链接，而不是外部链接。

第二，您正在尝试返回onClick事件处理程序中的组件。显然，它什么也做不了。

外部链接使用正常的<a>即可。或使Button组分为a，并将href="https://www.google.fr/"传递给它。

。MUI是这样做的:

<Button component="a" href="https://google.com">To Google</Button>

Answer 2

React Router用于应用程序内部导航，只能重定向到内部路由。

为了重定向到外部url，你可以这样做:

const test =  () => {
window.location.href = "https://www.google.fr/";
}
};

如果你想有一个可点击的按钮链接到你的外部url，然后使用a标记与外部url作为href属性是一个更好的解决方案，然后你可以自定义你的a链接的样式，使它看起来像一个按钮。