CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Muhammad Umar Gulzar
Muhammad Umar Gulzar

Reputation: 184

Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'

I have created a new react application using

npx create-react-app app-name

Then I changed my directory to that app folder and then ran the following command.

npm install react-router@next react-router-dom@next

Then I ran my application and it worked fine. Then I changed the default code and used Routes, Route, etc. Here is APP code

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

function Home()
{
  return <div>
        <h1>Home</h1>
    </div>
}

export default App;

I get the error:

Attempted import error: 'Action' is not exported from 'history'.

Path of the error is:

./node_modules/react-router/index.js

Any Idea what is wrong with it?

Upvotes: 5

Views: 6260

Answers (6)

ashwin paritchithu
ashwin paritchithu

Reputation: 1

npm i history

By installing this your problem will resolve this happens in older version of React DOM 5

Upvotes: 0

Jason Prado
Jason Prado

Reputation: 1503

As other answers have stated, the solution here is to install history@^5.0.0. However, if you're using TypeScript you might still run into the 'Action' is not exported from 'history' error. You need to remove @types/react-router/@types/react-router-dom from your devDependencies.

In react-router 5.x, types were not bundled so you needed to install @types/react-router-dom. In the 6.0 prerelease, types are already bundled so you don't need to explicitly install them. And if you keep the 5.x types around, they're out of date and also pull in a dependency on @types/history 4.x, which is also out of date.

So if you're upgrading to react-router 6.0 in a TypeScript project, remove the unnecessary types.

Upvotes: 1

Josh
Josh

Reputation: 111

For anyone else finding this, @Muhammad solution works as long as you don't rely on matchPath export (it doesn't appear to be exported in alpha.2 release).

But the actual solution is to make sure you've installed history@^5.0.0. Once I did that the "missing Action export" error went away. So @kcsujeet is right, but just make sure your dependency on history is at least 5.0.0.

Upvotes: 3

kcsujeet
kcsujeet

Reputation: 522

You need to install another package called history. Do npm i history.

More info here

Upvotes: 6

Muhammad Umar Gulzar
Muhammad Umar Gulzar

Reputation: 184

There is nothing wrong with my code. Maybe the issue is with the latest version of React-Router. So, I just changed the version of React-Router.

FROM

"react-router": "^6.0.0-beta.0"
"react-router-dom": "^6.0.0-beta.0"

TO

"react-router": "6.0.0-alpha.2",
"react-router-dom": "6.0.0-alpha.2"

It is working absolutely fine with no problems. The same code that I have mentioned in my question is working fine without any change. :)

Upvotes: 5

Md Jamil Moatasimbillah
Md Jamil Moatasimbillah

Reputation: 1

Instead of importing Routes component, import Switch component... There is not Routes component in the package.

Upvotes: -1

Related Questions