使用React的useNavigate Hook时页面内容消失问题求助

问题核心：useNavigate 是React Router的Hook，必须在被路由上下文（如BrowserRouter）包裹的组件内使用。你的代码未用路由容器包裹App组件，调用Hook时触发错误，导致页面无法渲染。

解决步骤 #

1. 确保已安装react-router-dom #

若还未安装，执行以下命令：

npm install react-router-dom
# 或
yarn add react-router-dom

2. 用路由容器包裹根组件 #

修改项目入口文件（通常为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>
);

3. 配置路由规则 #

在App组件中添加路由配置，将Contact组件映射到对应路径：

import React from "react";
import { useNavigate, Routes, Route } from "react-router-dom";
import Contact from "./Contact";

const App = () => {
  const navigate = useNavigate();

  const goToContact = () => {
    navigate('/contact'); // 路径建议用小写，避免大小写匹配问题
  };

  return (
    <div>
      {/* 路由出口：匹配到的组件会在这里渲染 */}
      <Routes>
        <Route path="/" element={
          <>
            <h1>Hello</h1>
            <button onClick={goToContact}>Contact</button>
          </>
        } />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};
export default App;

关键说明 #

• React Router的所有路由相关Hook（useNavigate、useParams等）都依赖路由上下文，只有在BrowserRouter（或HashRouter等）的子组件中才能正常工作。
• 路由路径统一使用小写，可避免不必要的匹配异常。

内容的提问来源于stack exchange，提问作者Karthik KK