React Router中useNavigate()使用报错问题求助

问题根源 #

1. 组件脱离路由上下文：Table.tsx内部自行通过ReactDOM.createRoot渲染了自身，这部分渲染完全脱离了Index.js中BrowserRouter的包裹范围，导致useNavigate无法获取到路由上下文。
2. 缺少必要导入：代码中未导入useNavigate和Button组件，不仅会触发路由上下文错误，还会导致其他未定义报错。

修复步骤 #

直接修改Table.tsx，调整如下：

import React from 'react';
import { useNavigate } from 'react-router-dom'; // 补充导入useNavigate
import Button from 'react-bootstrap/Button'; // 根据你的UI库导入Button，比如MUI则是@mui/material/Button
import './Table.css';

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

 const handleGoHome = () => {
   navigate("/homepage");
 };

 return (
   <div className="home-button-container">
    <Button variant="primary" onClick={handleGoHome}>Home</Button>
  </div>
 );
};

export default Table;

关键说明 #

• 移除Table组件内部的独立渲染逻辑：你的路由已经在Index.js中通过BrowserRouter统一管理，Table组件会由路由规则触发渲染，天然处于路由上下文环境中，不需要自行渲染。
• 补全缺失的导入：useNavigate必须从react-router-dom导入才能使用；Button组件需要根据你项目使用的UI库（如React Bootstrap、Material UI等）正确导入。

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