Search code examples
reactjsreact-router-domcdn

React-Router-Dom V6 Vs V5

Trying to create a minimalist React Application using CDN to test React-router-dom. The below code works fine:

<html>
  <head>
    <meta charset='UTF-8'>

        <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> 
        <script src="https://unpkg.com/react-dom@latest/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@5.3.4/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 (

        <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>
        );}

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
    </script>
  </body>
</html>

However, when I switch to the latest version of react-router-dom 6.17.0

   <script src="https://unpkg.com/react-router-dom@6.17.0/dist/umd/react-router-dom.development.js"></script>

I get an error:

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

Also, I am checking the exports in the CDN link and I don't see Route being exported, while it is in the earlier version. Should this be done differently in version 6.17 of react-router-dom.

Solution

  • I'm not exactly sure why, but adding other various "missing dependencies" appears to get the React-Router v6 code working for the use case.

    The Route component is able to be imported now. Also import the Routes component as it replaced the React-Router v5 Switch component and handles route matching/rendering. Route directly wraps a group of Route components.

    <html>
  <head>
    <meta charset='UTF-8'>

    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin></script> 
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script src='https://unpkg.com/@remix-run/router@1.11.0/dist/router.umd.min.js'></script>
    <script src='https://unpkg.com/react-router@6.18.0/dist/umd/react-router.development.js'></script>
    <script src='https://unpkg.com/react-router-dom@6.18.0/dist/umd/react-router-dom.development.js'></script>

  </head>
  <body>
    <div id='root'></div>
 
    <script type='text/babel'>
      const Link = ReactRouterDOM.Link;
      const Route = ReactRouterDOM.Route;
      const Routes = ReactRouterDOM.Routes;
      const Router = ReactRouterDOM.BrowserRouter;

      function App() {
        return (
          <Router>
            <nav>
              <br/><Link to="/">TO HOME</Link>
              <br/><Link to="/a">TO A</Link>
              <br/><Link to="/b">TO B</Link>
            </nav>

            <Routes>
              <Route path="/" element={<h1>Home</h1>} />
              <Route path="/a" element={<h1>A</h1>} />
              <Route path="/b" element={<h1>B</h1>} />
            </Routes>
          </Router>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>