Question

我注意到，在React Router提供的所有示例中，它使用Router对象作为要呈现的UI的一部分。但是我有一种情况，我需要在呈现代码之外使用Redirect对象。我有一组选项卡，当用户单击选项卡时，我需要重定向到其他网址。

我在Router文档中遇到了一个地方，该地方确实展示了如何将Router对象用作普通Javascript代码的一部分，而Javascript代码不是渲染的一部分，但我找不到它。本质上，我想做这样的事情：

function doRedirect() {
    return  (<Redirect to={"/" + user.username + "/projects"} />);
}

但这将无法编译。如何在普通Javascript代码内部的尖括号中使用重定向功能？

Answer 1

您可以使用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>
   )
}

这只是一个示例，但是显然您可以在相当大的灵活性下使用它。

See this question for push vs replace

在渲染之外使用React Router功能

1 个答案: