DEV Community

Avinash Maurya
Avinash Maurya

Posted on

Navigation style often depends

In React, the navigation style often depends on the complexity of your application and user experience preferences. Here are some common navigation styles used in React applications:

  1. Traditional Routing with React Router:

    • Library: React Router
    • Description: Utilizes a declarative approach for defining routes and rendering components based on the URL.
    • Example:
     import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    
     function App() {
       return (
         <Router>
           <Switch>
             <Route path="/" exact component={Home} />
             <Route path="/about" component={About} />
             <Route path="/contact" component={Contact} />
           </Switch>
         </Router>
       );
     }
    
  2. Single Page Application (SPA) with React Router:

    • Description: Keeps the user on a single HTML page and dynamically updates content as the user interacts with the app.
    • Example:
     import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
    
     function App() {
       return (
         <Router>
           <nav>
             <NavLink to="/">Home</NavLink>
             <NavLink to="/about">About</NavLink>
             <NavLink to="/contact">Contact</NavLink>
           </nav>
    
           <Route path="/" exact component={Home} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={Contact} />
         </Router>
       );
     }
    
  3. Tab-Based Navigation:

    • Description: Suitable for applications with multiple sections or tabs. Each tab corresponds to a specific view or functionality.
    • Example:
     import { useState } from 'react';
    
     function App() {
       const [activeTab, setActiveTab] = useState('home');
    
       const handleTabChange = (tab) => {
         setActiveTab(tab);
       };
    
       return (
         <div>
           <Tabs activeTab={activeTab} onChange={handleTabChange} />
           {activeTab === 'home' && <Home />}
           {activeTab === 'about' && <About />}
           {activeTab === 'contact' && <Contact />}
         </div>
       );
     }
    
  4. Drawer or Sidebar Navigation:

    • Description: Displays navigation options in a collapsible sidebar or drawer.
    • Example:
     import { useState } from 'react';
    
     function App() {
       const [isDrawerOpen, setDrawerOpen] = useState(false);
    
       const handleDrawerToggle = () => {
         setDrawerOpen(!isDrawerOpen);
       };
    
       return (
         <div>
           <Drawer isOpen={isDrawerOpen} onClose={handleDrawerToggle} />
           <MainContent />
         </div>
       );
     }
    

Choose a navigation style that suits the structure and requirements of your MERN stack application. Each approach has its advantages, and the choice depends on your specific use case and design preferences.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay