Javascript React Router v6，使用 Context API 保护路由

我有以下设置:

App.js个

import AppContext from './context/AppContext.js';
import router from './routes/routes.js';

function App() {
    const [token, setToken] = useState("");
    
    function login(token) {
        setToken(token);
    }

    return (
        <React.StrictMode>
            <AppContext.Provider value={{ token, login }}>
                <RouterProvider router={router} />
            </AppContext.Provider>
        </React.StrictMode>
    );
}

export default App;

routes.js个

export default createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        children: [
            {
                path: "home",
                element: <Home />
            },
            {
                path: "admin",
                element: <ProtectedRoute element={Admin} />
            },
            {
                path: "login",
                element: <Login />
            }
        ]
    }
]);

ProtectedRoute.js个

export default function ProtectedRoute({ element: Component, ...rest }) {
    const ctx = useContext(AppContext);

    return (
        ctx.token !== "" ? <Component /> : <Navigate to="/login" />
    );
}

我希望能够通过从上下文访问信息来判断用户是否登录，但是返回的对象始终包含缺省值.在这种情况下，有没有办法使用createBrowserRouter来访问上下文信息？