React Router Dom的Link与Material UI搭配使用报错求助

错误现象 #

在React项目中结合使用react-router-dom的Link组件与Material UI组件时，触发错误：

Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null

移除Router组件外部的<Link to="/user/login"></Link>代码后，错误消失。

错误原因 #

react-router-dom的所有路由相关组件（包括Link）都依赖Router组件提供的路由上下文(Router Context)。当Link被放置在Router组件的包裹范围之外时，它无法获取到路由上下文对象，此时尝试解构上下文里的basename属性就会得到null，从而抛出错误。

解决方案 #

方案1：将Link移至Router组件内部 #

调整组件结构，确保所有Link都处于Router的包裹范围内：

class Home extends Component {
    render() {
        return (
            <>
                <div className='app_main_container'>
                    <div className='sidebar_container'>
                        <Header />
                    </div>
                    <div className='content_container'>
                        <AppTopMenu />
                        <Router>
                            {/* 将Link移至Router内部 */}
                            <Link to="/user/login"></Link>
                            <Routes>
                                <Route exact path="/" element={<Categories />}></Route>
                                <Route exact path="/user/wishlist" element={<WishList />}></Route>
                                <Route exact path="/user/register" element={<UserRegister/>}></Route>
                                <Route exact path="/user/login" element={<UserLogin/>}></Route>
                                <Route exact path="/user/logout" element={<UserLogout/>}></Route>
                                <Route exact path="/user/profile" element={<ProtectedRoute Component={Profile} />}></Route>
                                <Route exact path="/user/:userid/:product_id" element={<UserLogin/>}></Route>
                                <Route exact path="/user/product/order/:product_id" element={<ProtectedRoute Component={PlaceOrder} />}></Route>
                                <Route exact path="/:cat/:pro_name/:pro_id" element={<ProductPage />}></Route>
                            </Routes>
                        </Router>
                    </div>
                </div>
            </>
        )
    }
}

方案2：将Router提升至应用最外层 #

如果项目中有多处路由相关组件需要在Router范围内使用，可以将Router组件移至整个应用的最外层（比如index.js），确保所有组件都能获取到路由上下文：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';

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

此时Home组件内部可以移除原有的Router代码，所有Link自然处于Router的包裹范围内。

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