时间戳

首页 > 解决方案 > 在渲染之外使用 React Router 功能

reactjs - 在渲染之外使用 React Router 功能

问题描述

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

我在路由器文档中遇到了一个位置，该位置确实显示了如何将路由器对象用作正常 Javascript 代码的一部分，该代码不是渲染的一部分，但我再也找不到它了。本质上我想做这样的事情：

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

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

标签： reactjsreact-router

解决方案

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

这只是一个示例，但显然您可以非常灵活地使用它。

请参阅此问题以了解推送与替换

推荐阅读