Router-1

   //Home

import React from 'react'


export default function Home() {
  return (
    <div>Home</div>
  )
}

// MyHoc

import React from 'react'
import Header from './Header'
import Footer from './Footer'
import {Link } from 'react-router-dom';

const MyHoc = (Component) => ({...props})=>(
    <div>
     
    <Header/>
   
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
   
    <div>
      <Component {...props}/>
    </div>
   
    <Footer/>
  </div>
)
export default MyHoc;


//Router


import Home from './Home';
import About from './About';
import Contact from './Contact';
import MyHoc from './MyHoc'

const MyHocHome = MyHoc(Home);
const MyHocAbout = MyHoc(About);
const MyHocContact = MyHoc(Contact);

export const AllPages = () => {
   
    let  routes = [
        {
          path: "/",
          element: <MyHocHome/>    
        },
        {
          path: "/about",
          element: <MyHocAbout />
        },
        {
          path: "/contact",
          element: <MyHocContact />
        },
   
      ]
    return routes;
  }
 

//App.js


import { BrowserRouter as Router, Route,Routes,Link, useRoutes,  } from 'react-router-dom';
import { AllPages } from './router/Router';


function App() {
  const dd = useRoutes(AllPages())
  return (
    <div className="App">
    {dd}
    </div>
  );
}

export default App;

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import './App.css';
import reportWebVitals from './reportWebVitals';
import Home from './Home';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App/>
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

Comments

Post a Comment

Popular posts from this blog

Controlled Form

 import React, { useState } from "react"; function Form() {   const [formData, setFormData] = useState({ name: "", email: "" });   const [submittedData, setSubmittedData] = useState(null);   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleSubmit = (e) => {     e.preventDefault();     setSubmittedData(formData);   };   return (     <div>       <h2>Controlled Form</h2>       <form onSubmit={handleSubmit}>         <input           type="text"           name="name"           placeholder="Name"           value={formData.name}           onChange={handleChange}         />      ...
Read more

LOCAL STORE

 //App.js import React from " react " ; import { Routes , Route } from " react-router-dom " ; import { ToastContainer } from " react-toastify " ; import " react-toastify/dist/ReactToastify.css " ; import LoginPage from " ./Pages/LoginPage " ; import UsersList from " ./Pages/UsersList " ; import HomePage from " ./Pages/HomePage " ; import Footer from " ./Components/Footer " ; function App () {   return (     < >       < ToastContainer         position = " top-center "         autoClose = { 2000 }         hideProgressBar = { false }         newestOnTop = { false }         closeOnClick         rtl = { false }         pauseOnFocusLoss         draggable         pauseOnHover       />       < Routes >   ...
Read more

NodeJS MongoDB

 server.js const mongoose = require ( 'mongoose' ); const dotenv = require ( 'dotenv' ); dotenv . config ({ path : './config.env' }); const app = require ( './app' ); // Require the Express app from app.js const DB = process . env . DATABASE ; // Connect to the database-------------------------------------- mongoose     . connect ( "mongodb://localhost:27017/nikedb" , {         useNewUrlParser : true ,         useUnifiedTopology : true ,         // Other options if needed     })     . then (() => {         console . log ( 'Database connection successful' );     })     . catch (( err ) => {         console . error ( 'Database connection error:' , err );     }); const port = process . env . PORT || 3000 ; app . listen ( port , () => {     console . log ( `App running on port ${ port } ` ); ...
Read more