using conditional dashboard on basis of role

I want to show different dashboards based on role of login member

2 Replies

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To show different dashboards based on the role of the logged-in member, you can use the useNavigate hook from react-router-dom to navigate users to different routes based on their roles. Here is an example of how you can achieve this:

import { useNavigate } from "react-router-dom";  

const Dashboard = () => {  
  const navigate = useNavigate();  
  const user = getUser(); // Assume this function gets the user info  
  
  if (!user) {  
    navigate("/login");  
  } else if (user.role === "admin") {  
    navigate("/admin");  
  } else {  
    navigate("/user");  
  }  
  
  return (  
    <div>  
      <h1>Welcome to the Dashboard</h1>  
    </div>  
  );  
};

import { useNavigate } from "react-router-dom";  

const Dashboard = () => {  
  const navigate = useNavigate();  
  const user = getUser(); // Assume this function gets the user info  
  
  if (!user) {  
    navigate("/login");  
  } else if (user.role === "admin") {  
    navigate("/admin");  
  } else {  
    navigate("/user");  
  }  
  
  return (  
    <div>  
      <h1>Welcome to the Dashboard</h1>  
    </div>  
  );  
};

In this example, the getUser function is assumed to fetch the user information, including their role. Based on the role, the useNavigate hook redirects the user to the appropriate dashboard. For better readability and maintainability, you can separate the logic from the JSX as follows:

const renderDashboard = (user) => {  
  if (!user) {  
    return <Login />;  
  } else if (user.role === "admin") {  
    return <AdminDashboard />;  
  } else {  
    return <UserDashboard />;  
  }  
};  
  
const App = () => {  
  const user = getUser(); // Assume this function gets the user info  
  return <div>{renderDashboard(user)}</div>;  
};

const renderDashboard = (user) => {  
  if (!user) {  
    return <Login />;  
  } else if (user.role === "admin") {  
    return <AdminDashboard />;  
  } else {  
    return <UserDashboard />;  
  }  
};  
  
const App = () => {  
  const user = getUser(); // Assume this function gets the user info  
  return <div>{renderDashboard(user)}</div>;  
};

In this approach, the renderDashboard function handles the conditional logic and returns the appropriate component based on the user's role. For more detailed information, you can refer to the following sources: - Navigation with Conditional Display Depending on the Role of the User (https://refine.dev/blog/usenavigate-react-router-redirect/#example-navigation-with-conditional-display-depending-on-the-role-of-the-user) - Separate Logic from JSX (https://refine.dev/blog/react-conditional-rendering/#separate-logic-from-jsx) These examples should help you implement role-based dashboard navigation in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@661831547690680321> kapa.ai is still learning and improving, please let us know how it did by reacting below