Question 222858 in Html Question posted in
Some basic documentation can be found here.

Html – How to solve ReactRouterDOM is not defined error?

I keep getting the ReactRouterDOM error but I am following a tutorial and my professor is not getting this error (video may be outdated).

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Routing</title>

    <!-- Load Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>

  <div id="root"></div> <!--- element we're going to target calling it root-->
 
  <!-- Load React -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->


  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 
  <!-- Load our React component. -->
  <script src="index.js" defer type="text/babel"></script>
  <script src="home.js" defer type="text/babel"></script>
  <script src="about.js" defer type="text/babel"></script>
  <script src="products.js" defer type="text/babel"></script>

</body>
</html>

index.js

function Spa(){
  const Route = ReactRouterDOM.Route;
  const Link = ReactRouterDOM.Link;
  const HashRouter = ReactRouterDOM.HashRouter;
     
  return (
    <HashRouter>
      <div>
        <h1> Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">about</Link> --
        <Link to="/products/">products</Link> 
        <hr/>
        <Route path="/" exact component={Home} />
        <Route path="/about/" exact component={about} />
        <Route path="/products/" exact component={products} />
      </div>
    </HashRouter>
  );
}

//Loads application
ReactDOM.render(
  <Spa/>,
  document.getElementById('root')
)

I’ve already tried adding

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

and many variations and am still getting the same error.

Tags:

4

Answers


  1. 0

    In your script you need to reference the react router package like you do with React for react and ReactDOM for react-dom.

    From what I can tell react-router-dom is exported as ReactRouterDOM.

    Load the CDN links for the specific version of react-router-dom being used. Current is v6.14.2. Looks like you are trying to use v5 though.

    <!-- Load React Router and React Router DOM -->
<script src="https://unpkg.com/[email protected]/umd/react-router.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.js" crossorigin></script>

    or if you want the production versions:

    <!-- Load React Router and React Router DOM -->
<script src="https://unpkg.com/[email protected]/umd/react-router.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js" crossorigin></script>
    Login or Signup to reply.
  2. 0

    error message ReactRouterDOM is not defined means that the React Router DOM package is not imported correctly.

    import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from 'react-router-dom';

function Spa() {
  return (
    <Router>
      <div>
        <h1>Hello World</h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">about</Link> --
        <Link to="/products/">products</Link>
        <hr />
        <Route path="/" exact component={Home} />
        <Route path="/about/" exact component={about} />
        <Route path="/products/" exact component={products} />
      </div>
    </Router>
  );
}

const Home = () => {
  return (
    <div>This is the Home page</div>
  );
};

const about = () => {
  return (
    <div>This is the about page</div>
  );
};

const products = () => {
  return (
    <div>This is the products page</div>
  );
};

ReactDOM.render(<Spa />, document.getElementById('root'));
    Login or Signup to reply.
  3. 0

    This error "any name" is not defined … occurs when you are using something in your react app but have not imported it correctly in your code. To fix it you need to import ‘react-router-dom’ properly. You can fix this error by following below steps.

    1. Install ‘react-router-dom’ using npm, yarn or pnpm if you haven’t already;
    npm install react-router-dom

    or

    yarn add react-router-dom

    or

    pnpm install react-router-dom
    1. Update your index.js to import the necessary components from react-router-dom:
    import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom'; // This imports necessary components

function Home() {
  return <h2>Home Component</h2>;
}

function About() {
  return <h2>About Component</h2>;
}

function Products() {
  return <h2>Products Component</h2>;
}

function Spa() {
  return (
    <BrowserRouter> {/* Use BrowserRouter instead of HashRouter */}
      <div>
        <h1> Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">about</Link> --
        <Link to="/products/">products</Link> 
        <hr/>
        <Route path="/" exact component={Home} />
        <Route path="/about/" exact component={About} />
        <Route path="/products/" exact component={Products} />
      </div>
    </BrowserRouter>
  );
}

//Loads application
ReactDOM.render(
  <Spa/>,
  document.getElementById('root')
);

    use BrowserRouter instead of HashRouter, which provides cleaner URLs without the ‘#’ symbol. We also import Route, Link, and BrowserRouter from react-router-dom instead of ReactRouterDOM.

    Login or Signup to reply.
  4. 0

    ReactDOM available since version 0.14.0.
    You Can Also do the same by this as well.

    import { RouterProvider, createBrowserRouter } from "react-router-dom";
function App() {


const router = createBrowserRouter([
{
  path: "/admin",
  element: <AdminLayout />,
},
{
  path: "/AboutUs",
  element: <AboutUsLayout />,
},
{
  path: "/",
  element: <Home />,
},
]);
return (
<RouterProvider router={router} />
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search