Estoy tratando de hacer esto en una sola página html. Primero uso unpkg.com para importar las cosas necesarias, como React y React-router-dom. Si uso el personal React simple, la página puede cargarse. Luego estoy tratando de usar React-router-dom, agrego el script en la etiqueta principal y creo un mydiv7. Muestra un mensaje de error. Por favor, ayúdame a ver qué está mal con este código.
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.development.js" crossorigin></script> </head> <body> <div id="mydiv7"></div> <script type="text/babel"> const Layout = () => { return ( <> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blogs">Blogs</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Outlet /> </> ) }; const Home = () => { return <h1>Home</h1>; }; const Blogs = () => { return <h1>Blog Articles</h1>; }; const Contact = () => { return <h1>Contact Me</h1>; }; const NoPage = () => { return <h1>404</h1>; }; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="blogs" element={<Blogs />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); } ReactDOM.render(<App />, document.getElementById('mydiv7')); </script> </body> </html>Debe importar BrowserRouter de acuerdo con la documentación . Puede importar con cdn usando referencias a la ventana, como esta.
const BrowserRouter = window.ReactRouterDOM.BrowserRouter;Creo que en algún lugar de su secuencia de comandos debe hacer referencia al paquete de enrutador de reacción como lo hace con React para react y ReactDOM para react-dom .
Por lo que puedo decir react-router-dom se exporta como ReactRouterDOM .
Cargue los enlaces CDN para la versión específica de react-router-dom que se está utilizando. La actual es v6.1.1.
<!-- Load React Router and React Router DOM --> <script src="https://unpkg.com/react-router@6.1.1/umd/react-router.development.js" crossorigin></script> <script src="https://unpkg.com/react-router-dom@6.1.1/umd/react-router-dom.development.js" crossorigin></script>
const BrowserRouter = ReactRouterDOM.BrowserRouter; const Routes = ReactRouterDOM.Routes; const Route = ReactRouterDOM.Route; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="blogs" element={<Blogs />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); }