Question 265756 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 3 menus in 3 different pages

In React, how to create 3 different menus in 3 different pages:
there is a Home page where you choose to be a customer or a seller, and depending on the page chosen (customer page or seller page) you have a new menu which will call up pages specific to the seller or customer.

function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Head>
          <title>Title</title>
        </Head>
       
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  );
}


import Home from '../components/Home';

function Index() {
  return <Home />;
}

export default Index;
Tags:

2

Answers


  1. 0

    you use useState like

    const [ userState , setUserState ] = useState('customer');

    and in menu links or buttons you can choose the elements that should display

    //for customer
<link to='' style={{display:userState === 'customer' ? 'block' : 'none'}}></link>
//or
<button style={{display:userState === 'customer' ? 'block' : 'none'}}></button>
//or
<div style={{display:userState === 'customer' ? 'block' : 'none'}}></div>

//for seller
<link to='' style={{display:userState === 'seller' ? 'block' : 'none'}}></link>

    .
    .
    .
    and change the userState in it’s correct place like response from the api or something like that

    Login or Signup to reply.
  2. 0

    You can use React Router to manage navigation between different pages
    First you have to install react-router-dom.

    npm install react-router-dom

    Second, Create a Home component that allows users to choose between being a customer or a seller.

    import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/customer">Customer</Link>
      <Link to="/seller">Seller</Link>
    </div>
  );
};

export default Home;

    And create separate components for the Customer and Seller Pages

    Update the APP Component to Include React router

    function App() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Router>
          <Head>
            <title>Title</title>
          </Head>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/customer" component={Customer} />
            <Route path="/seller" component={Seller} />
          </Switch>
        </Router>
      </PersistGate>
    </Provider>
  );
}

    Now, when a user selects "Customer" or "Seller" on the home page, they will be directed to the corresponding pages with different menus based on their role.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search