非JSX方式调用BrowserRouter提示未定义，求问题排查

问题出在UMD版本的react-router-dom的全局变量结构上——它所有的组件和API都挂载在ReactRouterDOM这个全局对象下，而不是直接暴露为独立的全局变量。你直接访问BrowserRouter自然会提示未定义。

修改你的脚本代码，通过ReactRouterDOM.BrowserRouter来访问即可：

<html>
    <head>
        <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/react-router-dom@6.6.1/dist/umd/react-router-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="application/javascript">
            console.log(React);
            console.log(ReactDOM);
            console.log(React.StrictMode);
            // 改为通过ReactRouterDOM访问BrowserRouter
            console.log(ReactRouterDOM.BrowserRouter);
            
            // 示例：用React.createElement渲染BrowserRouter
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(
                React.createElement(React.StrictMode, null,
                    React.createElement(ReactRouterDOM.BrowserRouter, null,
                        React.createElement(ReactRouterDOM.Routes, null,
                            React.createElement(ReactRouterDOM.Route, { 
                                path: "/", 
                                element: React.createElement('h1', null, 'Hello React Router!') 
                            })
                        )
                    )
                )
            );
        </script>
    </body>
</html>

同理，react-router-dom里的其他组件（比如Routes、Route、Link等）也都需要通过ReactRouterDOM对象来访问。

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