Routes component is not importing from react-router-dom. I checked my package.json and I have version 6.2.2, I uninstalled and reinstaled the package, running npm start again after the reinstall. I read the documentation and could not find anything regarding my problem.
Any advice?
My code:
import React from "react";
import {Footer, Header, Bio, Works} from "./containers";
import {Navbar} from "./components";
import { Routes, Route } from "react-router-dom";
import './App.css'
function App() {
return (
<div className="App">
<Navbar/>
<Header/>
<Bio/>
<Routes>
<Route path="/works" element={Works} />
</Routes>
<Footer/>
</div>
);
}
export default App;
This is my package.json, as you can see I have version 6.2.2 of react-router-dom:
{
"name": "my_portfolio_website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^1.1.7",
"@chakra-ui/react": "^1.8.6",
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.2.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}