useNavigation() 状态在 React Router 中永远不会“加载”

Question

我一直在关注 this 教程，尽管我一直在转换生成的步骤以使用 ApolloClient，因为我的 API 是 graphql。

我遇到的问题是

useNavigation()

的

state

属性从来不是

loading

，它总是

idle

。我觉得我一定做错了什么。我是否可能必须将

loadingComponent

传递给路线或其他东西？至少在教程中不是这样。

我的组件+Dataloader如下：

export const VideoPlayer = () => {
    const data = useLoaderData() as Video;
    const navigation = useNavigation();
    
    if (navigation.state === 'loading') {
        console.log('loading'); // This never runs...
        return (<Container className="text-white">Loading!!!</Container>);
    }
    
    console.log(data, navigation.state); // This returns the data and 'idle', twice.
    
    return (
        <div className="ps-[225px] py-2">
            <div className="w-full pt-[60px]"></div>
            <Container>
                <h1 className="text-white">{data.id} {data.video_url}</h1>
            </Container>
        </div>
    );
}

export const VideoPlayerDataLoader = async ({params}: any) => {
    const GET_VIDEO = gql`
        query {
            video(id: "${params.videoId}") {
                id
                video_url
            }
        }
    `;
    
    const { data } = await client.query({
        query: GET_VIDEO
    });
    
    return data.video;
};

我的路由器如下：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <VideosList />,
      },
      {
        index: true,
        path: "/:videoId",
        loader: VideoPlayerDataLoader,
        element: <VideoPlayer />,
      },
    ],
  },
]);

Answer 1

试试

const navigate = useNavigate();

代替

const navigation = useNavigation();

确保在组件中导入 useNavigate