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

user_13988016 0
Viewed 4595

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?

react-router-dom react-router reactjs
6 Answers

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

More info here

user_107791290

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. :)

user_139880160

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.

user_67571190

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.

user_1065170

npm i history

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

user_173845060

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

user_139880630
Related