React中使用react-router-dom的useNavigate时页面内容消失

你遇到的页面内容消失问题，核心原因是你的整个应用没有被Router组件包裹。react-router-dom的路由功能（包括useNavigate钩子、Routes和Route组件）必须在BrowserRouter（或同类型的Router组件，比如HashRouter）提供的上下文环境中才能正常工作。没有这个外层包裹，路由系统无法识别当前路径，也无法渲染对应的页面组件，最终导致页面没有内容显示。

解决步骤 #

1. 在应用的入口文件（通常是index.js）中导入BrowserRouter，并将App组件包裹在其中：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 你的App组件代码无需修改，保持原样即可。

完成上述修改后，路由上下文会被正确注入，useNavigate能正常触发页面跳转，Routes也会根据当前路径渲染对应的Home或Contacts组件，页面内容就能正常显示了。

内容的提问来源于stack exchange，提问作者Youssef Alsheghri