App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Route path="/abou" component={About} />
</div>
</Router>
);
}
}
export default App;
about.js
import React from 'react'
const about = () => {
return (
<div>about</div>
)
}
export default about
package.json
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"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"
]
}
}
Doubt???????????????????????????????????????????????????????????????????????????
I have installed react-router-dom as you can see in the package.json file but though it is compiling correctly, I am unable to see anything. What could be the error please let me know?
The component Route should be a child of the component Routes and in Route component you have to use the property element to specify the component to render instead of the property component.
import React, {Component} from 'react';
import './App.css';
import About from './About';
import Home from './Home';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}
}
export default App;
I noticed that you have confusion between react-router v5 and v6 (you are using v6) So for more information about react-router v6 visit the official react-router documentation website : https://reactrouter.com/docs/en/v6