0
126
Viewsbrowser router not being exported from react router
I am tring to use the react router dom to make different pages so that it can go to different pages on click but the app does not compile since browser router is not being imported. I just copy pasted it straight from the website. Can someone tell me where the mistake is and how to fix it
App,js
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Switch>
<Route path='detail'>
<Detail />
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</Router>
<Home />
</div>
)
}
export default App;
package.json {
"name": "disneyplus-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.6.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.1.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
·
Santiago Gelvez
1 answers
Answer question0
You are using version 6 of react-router-dom and you don't have react-router specified in your package.json file.
Import the components from react-router-dom and convert to using the RRDv6 components. The Switch component was replaced by a Routes component that must wrap the Route components. The Route components also now render their routed components on the element prop as JSX.
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Routes>
<Route path='detail' element={<Detail />} />
<Route path='/' element={<Home />} />
</Routes>
</Router>
<Home />
</div>
)
}
·
Santiago Gelvez
Report
Answer question