我注意到，在React Router提供的所有示例中，它使用Router对象作为要渲染的UI的一部分。但是我有一种情况，我需要在呈现代码之外使用Redirect对象。我有一组选项卡，当用户单击选项卡时，我需要重定向到其他URL。
我在Router文档中遇到了一个地方，该地方确实展示了如何将Router对象用作普通Javascript代码的一部分，而Javascript代码不是渲染的一部分，但我找不到它。本质上，我想做这样的事情：
function doRedirect() {
return (<Redirect to={"/" + user.username + "/projects"} />);
}
但这将无法编译。如何使用普通Javascript代码内的尖括号使用重定向功能？
您可以使用useHistory挂钩，那么就history.push(url)或history.replace(url)这样的：
import { useHistory } from 'react-router-dom'
const MyComponent = ({ user }) => {
const history = useHistory()
function handleClick() {
history.replace(`/${user.username}/projects`)
}
return (
<button onClick={handleClick}>Redirect to Projects</button>
)
}
这仅是一个示例，但是显然您可以在相当大的灵活性下使用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句