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

Question

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?

Answer 1

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

More info here