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?

回答1:

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"

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

回答2:

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

More info here

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/63071718/getting-error-when-try-to-use-react-router-v6-attempted-import-error-action

标签

reactjs

react-router

react-router-dom