如何在不同页面上显示不同的Navbars，React Router版本6？

Question

因此，我的网站将对帐户类型的学生，老师和管理员有三种不同风格的视图（它是一个虚拟的电子学习平台）。我想为学生提供另一种样式的Navbar（登录和登录的两个不同版本），然后是一个不同的老师（又是一个用于登录和登录），然后是另一个用于管理员（单件登录） 。

这就是我现在正在做的。我制作了一个扭曲所有内容的布局组件。

const Layout: FC<LayoutProps> = (props) => {
  return (
    <div className="flex flex-col min-h-screen dark:bg-gray-800">
      <MainNavigationBar />
      <main className="mx-auto flex-grow" style={{ width: "90%" }}>
        {props.children}
      </main>
      <Footer />
    </div>
  );
};
export default Layout;

那就是我的app.tsx的样子。

export default function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/signup" element={<SignUpPage />} />
        <Route path="/login" element={<LogInPage />} />
        <Route path="/cart" element={<EmptyCart />} />
        <Route path="/cart/:studentId" element={<ShoppingCart />} />
        <Route path="/checkout/:studentId" element={<CheckOutPage />} />
      </Routes>
    </Layout>
  );
}

如您所见，尚无教师和管理员的路线，因为IDK最好的是实现每个帐户类型的功能，而每个帐户类型都具有不同的NAVBAR本质上意味着完全不同的视图样式。

我想到了两种方式，但可以帮助我了解哪一种更好。

1. 我将Navbar直接放入每个页面组件中。但这意味着每个页面上都会有nav栏的副本的帐户类型，然后更新更改将很难，效率低下。
2. 我将所有三个导航栏都放在app.tsx文件中，然后根据哪种帐户类型的活动有条件地渲染导航栏。听起来更好，因为每个帐户类型页面都只有一个导航栏副本。但是问题是，当访问“/老师”或“/admin”时，IDK如何触发/设置“帐户类型活动”。

帮助我了解最佳实践或技术，这是我的第一个大项目，谢谢。

Answer 1

您应该根据登录的用户类型有条件地渲染标头。根据路线，我猜您的应用程序将具有某种用户身份验证。您可以使用上下文API或诸如Redux之类的库具有全局状态，其中您可以保存已登录的用户的帐户数据（其中包括帐户类型）。然后，您可以有条件地渲染与帐户类型相对应的Navbar。

您可以了解有关上下文在这里。

Answer 2

我的场景相同，我通过获取用户的类型来解决它：

  const { user } = props;
  switch (user?.role) {
    case "STUDENT":
      return <Student />;
    case "TEACHER":
      return <Teacher />;
    case "ADMIN":
      return <Admin />;
    default:
      return <div className="">User not valid.</div>;
  }

我正在与您分享我的代码：

import React from "react";
import { Switch, Route } from "react-router-dom";
import Profile from "../pages/Profile";
import Dashboard from "../pages/Dashboard";
import {Student, Teacher, Admin} from "./User";
import { useSelector } from "react-redux";

const Content = (props) => {
  const { user } = props;
  if (!user) {
    return <div className="">User not valid.</div>;
  }

  switch (user?.role) {
    case "STUDENT":
      return <Student />;
    case "TEACHER":
      return <Teacher />;
    case "ADMIN":
      return <Admin />;
    default:
      return <div className="">User not valid.</div>;
  }
};

export default function Routes() {
  const user = useSelector((s) => s.auth.user);

  return (
    <Switch>
      <Route exact path={"/profile"} component={Profile} />
      <Route exact path={"/dashboard"} component={Dashboard} />
      <Content user={user}/>
    </Switch>
  );
}

您可以从上面的code中获得帮助。