onRouteBefore中使用hook报错

[africa1207]

demo代码基本上就是博主文章中的代码，在onRouteBefore中使用hook就报错，代码如下

routes.tsx

const routesConfig = [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: () => import("../pages/Home")
},
{
path: "/about",
meta: { auth: true },
component: () => import("../pages/About")
},
{
path: "/login",
component: () => import("../pages/Login")
},
{
path: "*",
component: () => import("../pages/NotFound")
}
];

export { routesConfig };

> onRouteBefore.ts

import { useState } from "react";

const onRouteBefore = ({ pathname, meta }) => { // const user = useSelector(userSelecter); // 报错，于是去掉redux单纯使用useState也报错 // const isLogin = !!user.token; const [isLogin] = useState(false); if (meta?.auth) { if (!isLogin) { return "/login"; } } }; export { onRouteBefore };

> index.tsx

import { BrowserRouter, Link, useRoutes } from "react-router-dom"; import { routesConfig } from "@/router"; import RouterWaiter from "react-router-waiter"; import { onRouteBefore } from "./router/onRouteBefore";

export default function () { return (

Home About notFound

); }

#### 报错信息如下
![image](https://user-images.githubusercontent.com/21698755/169782118-609ed34a-5b92-410c-82d5-e148dbb58f3c.png)

[neohan666]

这里的路由拦截是路由加载前的拦截，不是组件环境，不能使用组件hook

[africa1207]

这里的路由拦截是路由加载前的拦截，不是组件环境，不能使用组件hook 那这里的isLogin肯定是从redux或者context中获取的，如果不能使用hook那还能怎么获取到登录态呢，另外您说不是组件环境不能使用组件hook，但是使用自定义hook还是不行吗

[neohan666]

备注： 1、从redux中取数据不一定非要用hook语法，可以直接引入store取里面的数据。 2、这里说的非组件环境是指代码执行时所处的环境不是在组件内，用react官方的术语说就是top level下不允许使用官方的hook，只要自定义hook里也没有使用这些就可以在onRouterBefore里引用。