Console error:[The above error occurred in the <Link> component:]

May 10, 2023

———error on console:——————-

index.js:1 The above error occurred in the <Link> component:

at LinkWithRef (http://localhost:1234/index.3d214d75.js:27970:11)
at div
at Header
at App
Consider adding an error boundary to your tree to customize error
handling behavior. Visit https://reactjs.org/link/error-boundaries to
learn more about error boundaries.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

enter image description here

So I am trying to load cart component of my App on click of the image of the cart which is on my Header component using react-router-dom but getting the following error on console.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

App.js

import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Body />,
    errorElement: <Error />,
  },
  {
    path: "/restaurant/:id",
    element: <RestaurantMenu />,
    errorElement: <Error />,
  },
  {
    path: "/cart",
    element: <Cart />,
    errorElement: <Error />,
  },
]);

function App() {
  return (
    <>
      <RouterProvider router={router} fallbackElement={<Error />} />
      <Header />
      <Provider store={store}>
        <Outlet />
        <Footer />
      </Provider>
    </>
  );
}

export default App;

Header.js

import React from "react";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div className="flex w-[100%] items-center justify-between shadow-lg h-14 absolute left-0 top-0">
      <div className="flex items-center ">
        <div>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjunLTj0CdbpCMM0yRd61KuvwQyvVf8O-DKg&usqp=CAU"
            alt="logo"
            className="h-16 p-2 mx-2"
          />
        </div>
        <div>
          <p className="font-bold text-xl">FOODELIVERY</p>
        </div>
      </div>
      <div>
        <ul className="flex">
          <li className="text-xl px-4 cursor-pointer">Home</li>
          <li className="text-xl px-4 cursor-pointer">Contact</li>
          <li className="text-xl px-4 cursor-pointer">About</li>
          <li className="text-xl px-4 cursor-pointer">Instamart</li>
        </ul>
      </div>
      <Link to="/cart">
        <div className="flex items-center">
          <div>
            <img
              className="h-16 p-2"
              src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/Ex/2Q=="
              alt="cart"
            />
          </div>
          <div className="mr-4">
            <span className="text-2xl text-red-600 font-bold">(0)</span>
          </div>
        </div>
      </Link>
    </div>
  );
};
 
export default Header;

Cart.js

import React from 'react'

const Cart = () => {
  return (
    <div className='mt-14'>Cart</div>
  )
}

export default Cart

>Solution :

You didn’t share what the actual issue or error is/was, but based on the code I’ll say it’s something to do with rendering Link and Outlet components outside a routing context.

Create a layout route component to render the Header and Outlet so that all content is rendered into the routing context the RouterProvider provides.

Example:

import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";

const AppLayout = () => (
  <>
    <Header />
    <Outlet />
    <Footer />
  </>
);

export const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Body />,
        errorElement: <Error />,
      },
      {
        path: "/restaurant/:id",
        element: <RestaurantMenu />,
        errorElement: <Error />,
      },
      {
        path: "/cart",
        element: <Cart />,
        errorElement: <Error />,
      },
    ]
  },
]);

function App() {
  return (
    <Provider store={store}>
      <RouterProvider router={router} fallbackElement={<Error />} />
    </Provider>
  );
}

export default App;