reactjs 3个菜单在3个不同的页面[关闭]

nzrxty8p  于 2023-10-17  发布在  React
关注(0)|答案(2)|浏览(133)

已关闭,此问题需要更focused。它目前不接受回答。
**想改善这个问题吗?**更新问题,使其只关注editing this post的一个问题。

昨天关门了。
Improve this question
在React中,如何在3个不同的页面中创建3个不同的菜单:有一个主页,您可以选择成为客户或卖方,并根据所选择的页面(客户页面或卖方页面),您有一个新的菜单,将调用特定于卖方或客户的页面。

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;
ws51t4hk

ws51t4hk1#

使用useState时,

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

在菜单链接或按钮中,您可以选择应显示的元素

//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>

.并在正确的位置更改userState,例如来自API的响应或类似的东西

svgewumm

svgewumm2#

您可以使用React Router来管理不同页面之间的导航首先,您必须安装react-router-dom.

npm install react-router-dom

第二,创建一个Home组件,允许用户选择是客户还是卖家。

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;

并为CustomerSeller页面创建单独的组件
更新APP组件以包含React路由器

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>
  );
}

现在,当用户在主页上选择“客户”或“卖家”时,他们将被引导到相应的页面,并根据他们的角色使用不同的菜单。

相关问题