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

nzrxty8p 于 2023-10-17 发布在 React

关注(0)|答案(2)|浏览(134)

已关闭，此问题需要更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;

reactjs

来源：https://stackoverflow.com/questions/77297152/3-menus-in-3-different-pages

2条答案

按热度按时间

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的响应或类似的东西

赞(0）回复(0）举报 2023-10-17

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;

并为Customer和Seller页面创建单独的组件
更新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>
  );
}

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

赞(0）回复(0）举报 2023-10-17

我来回答

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

2条答案

相关问题

热门标签

最新问答