import all the files & give path using react-router-dom

Author: rohitverma0234

package-lock.json

@@ -8,6 +8,7 @@
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-router-dom": "^6.22.3",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
  },

package.json

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const About = () => {
+ return (
+ <div>About</div>
+ )
+}
+
+export default About

src/About.js

@@ -1,24 +1,25 @@
-import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './Home';
+import About from './About';
+import Contact from './Contact';
+import SingleProduct from './SingleProduct';
+import Cart from './Cart';
+import ErrorPage from './ErrorPage';
 
 function App() {
  return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
+ <BrowserRouter>
+ <Routes>
+ <Route path='/' element={<Home/>}/>
+ <Route path='/about' element={<About/>}/>
+ <Route path='/products' element={<Home/>}/>
+ <Route path='/contact' element={<Contact/>}/>
+ <Route path='/singleproduct' element={<SingleProduct/>}/>
+ <Route path='/cart' element={<Cart/>}/>
+ <Route path='*' element={<ErrorPage/>}/>
+ </Routes>
+ </BrowserRouter>
  );
 }
 

src/App.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Cart = () => {
+ return (
+ <div>Cart</div>
+ )
+}
+
+export default Cart

src/Cart.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Contact = () => {
+ return (
+ <div>Contact</div>
+ )
+}
+
+export default Contact

src/Contact.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ErrorPage = () => {
+ return (
+ <div>ErrorPage</div>
+ )
+}
+
+export default ErrorPage

src/ErrorPage.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Home = () => {
+ return (
+ <div>Home</div>
+ )
+}
+
+export default Home

src/Home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Products = () => {
+ return (
+ <div>Products</div>
+ )
+}
+
+export default Products

src/Products.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SingleProduct = () => {
+ return (
+ <div>SingleProduct</div>
+ )
+}
+
+export default SingleProduct