Breaking News: Grepper is joining You.com. Read the official announcement!

My React Initial Setup

pra's play answered on May 28, 2024 Popularity 1/10 Helpfulness 1/10

answer My React Initial Setup

My React Initial Setup

Comment

## App.jsx
import { RouterProvider, createBrowserRouter, Outlet } from 'react-router-dom';
import NavHeader from "./Pages/NavHeader/NavHeader";
import Footer from "./Pages/Footer/Footer";
import { CartProvider } from './Contexts/CartContext';
import ViewCart from "./Pages/ViewCart/ViewCart";
import HomePage from "./Pages/HomePage/HomePage"; // Create a HomePage component if it doesn't exist
import ErrorPage from "./Pages/ErrorPage/ErrorPage"; // Create an ErrorPage component

const AppLayout = () => {
  return (
    <>
      <NavHeader />
      <div className="main-content">
        <Outlet />
      </div>
      <Footer />
    </>
  );
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/view-cart', element: <ViewCart /> }
    ]
  }
]);

function App() {
  return (
    <CartProvider>
      <RouterProvider router={router} />
    </CartProvider>
  );
}

export default App;

## main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
    <ToastContainer />
  </React.StrictMode>,
);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on May 28 2024

pra's play

0 Answers Avg Quality 2/10

My React Initial Setup

Contents

More Related Answers

My React Initial Setup

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.