使用React-Router时遭遇UNSAFE_invariant未定义错误寻求解决

错误原因 #

这个错误的核心是**Routes组件未被Router上下文提供者（如BrowserRouter）包裹**。React Router 6.x要求所有路由相关组件必须运行在Router上下文环境中，否则无法获取必要的路由状态与工具函数，进而触发上下文缺失类错误。即使移除Route组件只保留Routes，错误依然存在，正是因为Routes本身依赖Router上下文才能完成初始化。

修改后的完整代码 #

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Test React DOM</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/6.9.0/react-router.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.9.0/react-router-dom.development.js"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
    </head>

    <body>
    
        <div id="app-root"></div>
        
        <script type="text/babel">
            const { Routes, Route, BrowserRouter } = ReactRouterDOM;
            
            class Page1 extends React.Component
            {
                render()
                {
                    return (
                        <h1>Page 1</h1>
                    );
                }
            }
            
            class App extends React.Component
            {
                render()
                {
                    return (
                        <BrowserRouter>
                            <Routes>
                                <Route path="/" element={<Page1 />} />
                            </Routes>
                        </BrowserRouter>
                    );
                }
            }
            
            jQuery(function ($)
            {
                ReactDOM.render(
                    <App />,
                    document.getElementById('app-root')
                );
            });
        </script>
        
    </body>
</html>

关键修改点 #

1. 从ReactRouterDOM中解构引入BrowserRouter组件
2. 将Routes组件整体包裹在BrowserRouter内部，为路由系统提供必要的上下文环境

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