reactjsreact-routeroutlet

Attempted import error: 'Outlet' is not exported from 'react-router-dom'

Please help me on how I can fix this error

Attempted import error: 'Outlet' is not exported from 'react-router-dom'.

This is how I imported the component

import { Outlet  } from "react-router-dom";

This is my Package.json file

"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.0.0",
"react-scripts": "3.4.3",
"serve": "11.3.2"
},

This is where I'm trying to use it

const User = () => {
  return (
    <div className="User">
      <TopNav />
      <SideNav />
      <div className="Body">
        <Outlet />
      </div>
    </div>
  );
};
Solution

  • Looks like you are trying to use a feature from the package that is going to be released in V6 of react-router-dom, but the version you are using is v5.2.

    If you really want to use the Outlet feature, you will have to go with a alpha, beta or experimental version of the package, you can find then all here https://www.npmjs.com/package/react-router-dom

    Those versions arent ready for usage yet and can containg bugs and problems. To install the V6 version just do a npm install react-router-dom@version