小编qwe*_*ezz的帖子

我正在尝试利用 React Router 加载器。实际上，除了一种情况之外，它的效果非常棒。

我用于Auth0 React SDK授权。我传递getAccessTokenSilently给axios interceptor所有 API 调用，标头中都有不记名令牌。在某些路由上，我以这种方式使用 React Router v6.4 中的加载器：

路由器

              {
                path: PATHS.rawMedia,
                element: <RawMediasPage />,
                loader: rawMediasLoader,
              }

在我重新加载页面之前它工作得非常好。页面重新加载加载器在 Auth0 之前发送请求。在这种情况下，加载程序发送没有承载令牌的请求，并且从后端返回错误。

如何解决这个问题？高技能的人暗示我如何解决这个问题，但不幸的是我没那么好。据我了解，我需要在路由中进行<RouterProvider router={router} />更App.tsx深入的处理，以便 Auth0 首先针对令牌触发......但我不明白如何实现它。

AuthProvider.tsx

export const AuthProvider = (): JSX.Element | null => {
  const navigate = useNavigate();
  if (!(domain && clientId)) {
    return null;
  }

  const onRedirectCallback = (appState: any) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain} …

我试图在 React Router 6.4.3 中从 BrowserRoute 组件切换到 createBrowserRouter 但出现错误：

useNavigate() 只能在组件上下文中使用。

我该如何解决这个问题？该错误来自 AuthProvider 组件，我认为我需要用 RouterProvider 包装它，但不清楚如何做到这一点。

Index.tsx 组件

const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <AuthProvider>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </AuthProvider>
    </Provider>
  </React.StrictMode>
);

App.tsx 组件

const router = createBrowserRouter([
  {
    element: <ProtectedRoute />,
    children: [
      {
        path: '/',
        element: <DashboardLayout />,
        children: [
          {
            index: true,
            element: <HomePage />,
          },
          {
            path: 'about',
            element: <AboutPage />,
          },
        ],
      },
    ],
  },
  {
    path: …

我正在使用动态路由。我得到 id: string 和 useParams 然后我循环遍历帖子数组以查找目标帖子并将 id 类型更改为 Number 否则我会收到错误。当我将类型 ISory 分配给 targetStory 时，会出现问题。它说：

输入“故事| undefined' 不能分配给类型'IStory'。类型“未定义”不可分配给类型“IStory”。

我不知道如何解决这个问题。请问你能帮帮我吗？

interface IStoryPageProps {
  id: string;
}

export interface IStory {
    by: string;
    descendants: number;
    id: number;
    kids: number[];
    score: number;
    time: number;
    date: string;
    title: string;
    type: string;
    url: string;
  }
  
const StoryPage: React.FC = () => {
  const { id } = useParams<IStoryPageProps>();

  const { storyList } = useTypedSelector((state) => state.story);

  // error happens here
  const targetStory: IStory = storyList.find((story) => …

我正在尝试从 createAsuncThunks 迁移到 RTK-Query。在页面加载时，我检查存储中是否没有用户，然后从后端获取用户和其他数据。

此代码与 createAsuncThunks 配合良好，但与 RTK-Query 配合使用效果如何？

const InitApp = () => {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.user);
  const ignore = useRef(false);

  useEffect(() => {
    if (!user && !ignore.current) {
      Promise.all([
        dispatch(getUser()),
         dispatch(getRawMedias()),
        dispatch(getFaces()),
        dispatch(getProjects()),
      ]);
    }

    return () => {
      ignore.current = true;
    };
  }, [dispatch, user]);

  if (!user) {
    return <Loader areaLoader />;
  }

  return <Outlet />;
};

我认为这种方法是错误的，但目前尚不清楚如何正确地实现它：

  const {data} = useGetUserQuery()

  useEffect(() => {
    if (!data) {
      // can't …