尝试使用 CDN 创建一个极简的 React 应用程序来测试 React-router-dom。下面的代码工作正常：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;
const Router = ReactRouterDOM.BrowserRouter;
function App(){
return (
<div>
<Router>
<nav>
<br/><Link to="/">TO HOME</Link>
<br/><Link to="/a">TO A</Link>
<br/><Link to="/b">TO B</Link>
</nav>
<Route path="/" exact component={()=><h1>Home</h1>} />
<Route path="/a" component={()=><h1>A</h1>} />
<Route path="/b" component={()=><h1>B</h1>} />
</Router>
</div>
);}
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>但是，当我切换到最新版本的react-router-dom 6.17.0
<script src="https://unpkg.com/[email protected]/dist/umd/react-router-dom.development.js"></script>我收到错误：
index.tsx:1858 Uncaught TypeError: Cannot read properties of undefined (reading 'Route')
at Object.get [as Route] (index.tsx:1858:1)
at <anonymous>:4:28
此外，我正在检查 CDN 链接中的导出，但没有看到路由被导出，而它是在早期版本中。在 React-router-dom 6.17 版本中是否应该以不同的方式完成此操作。
尝试从react-router-dom导入BrowserRouter、Link和Route元素，并在代码中相应地使用它们。
版本 5 中的 Route 组件现已替换为版本 6 中的 Route 元素。
...
<script>
const { BrowserRouter, Link, Route } = ReactRouterDOM;
function App() {
return (
<div>
<BrowserRouter>
<nav>
<br/><Link to="/">TO HOME</Link>
<br/><Link to="/a">TO A</Link>
<br/><Link to="/b">TO B</Link>
</nav>
<Route path="/" element={<h1>Home</h1>} />
<Route path="/a" element={<h1>A</h1>} />
<Route path="/b" element={<h1>B</h1>} />
</BrowserRouter>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
...