我正在尝试创建一个helper函数，它将location字符串作为参数，然后进行导航。
location
const HandleNavigation = ({location}) => { return <Navigate to={location} replace />; }; <button onClick={()=><HandleNavigation location='/home'/>} > Click me </button>
请告诉我为什么这种导航方法不起作用。
wpcxdonn1#
一种可能的解决方案是：
import { useNavigate } from "@reach/router" const HandleNavigation = ({location}) => { const navigate = useNavigate(); return <button onClick={() => navigate(location, {replace: true})} > Click me </button>; };
sgtfey8w2#
对于此应用程序，必须使用useNavigate。Navigate组件只能作为组件处理，不能作为函数处理。就像这样：
useNavigate
Navigate
const AuthReq = ({isAuth}) => { if(isAuth) return <Navigate to="/login" /> return // something else }
对于您的应用程序，它将如下所示：
const navigate = useNavigate(); return <button onClick={() => navigate(location, { replace: true })}>Title</button>
2条答案
按热度按时间wpcxdonn1#
一种可能的解决方案是：
sgtfey8w2#
对于此应用程序，必须使用
useNavigate。Navigate组件只能作为组件处理，不能作为函数处理。就像这样：
对于您的应用程序，它将如下所示：