how can I move from one page to other jsx file in react-CodePudding

I have this this App.js

import './App.css';
import React from 'react'
import Navbar from './COMPONENTS/Navbar'
import Body from './COMPONENTS/Body'
import Menu from './COMPONENTS/Menu';
import './COMPONENTS/Body.css'
import Data from './COMPONENTS/Data' ; 
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import Cakebody from './COMPONENTS/Cakebody';
import Customize from './COMPONENTS/Customize';
import Surprise from './COMPONENTS/Surprise';
import Surpriseone from './COMPONENTS/Surpriseone';
import Birthday from './COMPONENTS/Birthday';
import Flowers from './COMPONENTS/Flower';
import Gotocart from './COMPONENTS/Gotocart';
const App = () => (
  <>
  {/* const { productItems } = data ;   */}
    <BrowserRouter>
      <Navbar />
      <Menu />
      <Routes>
        <Route className="check" path='/' element={<Body title="All Items" />}></Route>
        <Route  className="check" path='/cakes' element={<Cakebody title="Same Day Cake" />}></Route>
        {/* <Route path="/cart" component={Gotocart} /> */}
        {/* <Route  className="check" path='/cart' element={<Gotocart/>}></Route> */}

        <Route className="check" path='/Customize' element={<Customize title="Customization Cake" />}></Route>

        <Route className="check" path='/anniversary' element={<Surprise title="Anniversary cakes" />}></Route>

        <Route className="check" path='/surprise' element={<Surpriseone title="Surprise Cake" />}></Route>

        <Route className="check" path='/birthday' element={<Birthday title="Birthday Cakes" />}></Route>

        <Route className="check" path='/flowers' element={<Flowers title="Flowers" />}></Route>

      </Routes>
    </BrowserRouter>
  </>
);

export default App;

And I want to click on the cart and want to move to a different page with no navbar , body and all

That page is this

import React from 'react'
import images from './assets/cake21.jpeg'
import image1 from './assets/cake53.jpeg'
import image2 from './assets/cake61.jpeg'
import image3 from './assets/cake81.jpeg'
import image4 from './assets/cake78.jpeg'
import flower16 from './assets/flower16.jpeg'
import Pricetag from './Pricetag'
import Gotocart from './Gotocart'
import { Link } from 'react-router-dom'
export default function Menu() {
  return (
    <div>
      <div className="location sample">
        <i ></i>
        We operate in NOIDA and DELHI only.
        <div className="go">
          <a href="Gotocart.jsx">
            <i ></i>
          </a>
        </div>
      </div>

      <hr className="line" />
      {/* <hr className="line" /> */}
      <div className="about-us">
        You can share your designs on WhatsApp
        <i ></i>
        <a href="https://wa.me/<>" target='_blank' rel="noreferrer" className='no'></a>
        we can make the same on the cake.
      </div>
      <hr className="line" />
      <div className="main-head">
        <div className="new-head">Menu</div>
        <div className="info">
          Click on the images to see the list below
        </div>
        <div className="container22">

          {/* <div className="con112"> */}
          <Link to='/cakes' className="menulink con112 ">
            <img src={images} alt="" className='img12' />
            <div className='name1' >Same Day Cakes</div>
          </Link>
          {/* </div> */}

        </div>
      </div>
    </div>
  )
}

What should I change in these files to move to a new page when I click on the cart icon.

Current code just works like react router and menu nad navbar are right there, I want to remove that also

CodePudding user response：

Simple you can create a Layout and use that Layout whenever you need based on the pages.

Example:

Layout.js

const Layout = (props) => {

    return(
        <>
            <Navbar />
            <Menu />
            {props.children}
        </>
    )
}

Home.js

import Layout from './Layout';

const Home = (props) => {

    return(
        <Layout>
            <h1>Home Page </h1>
        </Layout>
    )
}

About.js

import Layout from './Layout';

const About = (props) => {

    return(
        <Layout>
            <h1>About Page </h1>
        </Layout>
    )
}

CodePudding user response：

Wrap Navbar and Menu as explained by another answer into a component like this.

const Layout = (props) => {

    return(
        <>
            <Navbar />
            <Menu />
            {props.children}
        </>
    )
}

Wrap other components having navbar with the layout component.

<BrowserRouter>
  <Navbar />
  <Menu />
  <Routes>
    <Route className="check" path='/' element={<Layout><Body title="All Items" /></Layout>}></Route>
    <Route  className="check" path='/cakes' element={<Layout><Cakebody title="Same Day Cake" /></Layout>}></Route>
    <Route path="/cart" component={Gotocart} />
    {/* rest of the code same way */}
  </Routes>
</BrowserRouter>