How can I render different news components into the Navbar Component & display their data on the Navbar page, On Click of Navbar menu links

user_12008630 0
Viewed 115

I have made landing page where onClick of button it redirects to the Menus page/component where I have declared Navbar component & here only I want to render the different news category component on click of multiple nav menus of Navbar.

By using react-router-dom V6 how can I render different categories of news component underneath of Navbar.

Below is the code which I have tried yet.

App.js

import React from 'react';
import {Routes,Route} from 'react-router-dom';
import LandingPage from './Components/LandingPage';
import Menus from './Component/Menus;

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/' element={<LandingPage/>} />
        <Route path='menus'    element={<Menus/>} />
      </Routes>
    </>
  )
};
export default App;

Menus.js

import Navbar from './Navbar';

const Menus = () => {
  return (
    <div>
      <Navbar/>     
    </div>
  );
};    
export default Menus;

Navbar.js

import '../Styles/Navbar.css';
import Entertainment from './Entertainment';
import Business from './Business';
import Health from './Health';
import Science from './Science';
import Sports from './Sports';
import Technology from './Technology';
import {Link,Route,Routes} from 'react-router-dom';
import {useState} from 'react';

const Navbar = ()=>{
  const [isMobile,setIsMobile] = useState(false);
  return(
    <>
      <nav className="navbar">
        <h3 className="logo">theNews</h3>
        <ul className={isMobile?'nav-links-mobile':'nav-links'}
          onClick={()=>setIsMobile(false)}>
          <Link to='/business' className='business'><li>Business</li></Link>
          <Link to='/fun' className='fun'><li>Entertainment</li></Link>
          <Link to='/health' className='health'><li>Health</li></Link>
          <Link to='/science' className='science'><li>Science</li></Link>
          <Link to='/sports' className='sports'><li>Sports</li></Link>
          <Link to='/tech' className='tech'><li>Technology</li></Link>            
        </ul>
          <button className='mobile-menu-icon' onClick={()=>setIsMobile(!isMobile)}>
           {isMobile? <i className='fas fa-times'></i>:<i className='fas fa-bars' ></i>}
          </button>
      </nav>
      <div>
      <Routes>
        <Route path='business'  element={<Business/>}/>
        <Route path='health'    element={<Health/>} />
        <Route path='science'   element={<Science/>} />
        <Route path='sports'    element={<Sports/>} />
        <Route path='tech'      element={<Technology/>} />
        <Route path='fun'       element={<Entertainment/>} />
        </Routes>
      </div>             
    </>
  )
}
export default Navbar;
react-router-dom reactjs javascript
1 Answers

If I understand your question correctly you are wanting to render Menus on the "/menus" path, and then also render sub-routes in Navbar being rendered by Menus. In react-router-dom v6 route paths are now always exactly matched, and the "/menus" root path precludes matching and rendering sub-routes.

The solution is to append a "*" wildcard matcher to the root path to allow additional route matching.

<Routes>
  <Route path="/" element={<LandingPage/>} />
  <Route path="/menus/*" element={<Menus/>} />
</Routes>

Additionally, in Navbar you are rendering relative route paths but specifying absolute route links. These should be in agreement. Remove the leading "/" character from the links so they are also relative to the "/menus" route path.

const Navbar = () => {
  const [isMobile, setIsMobile] = useState(false);
  return(
    <>
      <nav className="navbar">
        <h3 className="logo">theNews</h3>
        <ul className={isMobile?'nav-links-mobile':'nav-links'}
          onClick={()=>setIsMobile(false)}>
          <Link to='business' className='business'><li>Business</li></Link>
          <Link to='fun' className='fun'><li>Entertainment</li></Link>
          <Link to='health' className='health'><li>Health</li></Link>
          <Link to='science' className='science'><li>Science</li></Link>
          <Link to='sports' className='sports'><li>Sports</li></Link>
          <Link to='tech' className='tech'><li>Technology</li></Link>            
        </ul>
          <button className='mobile-menu-icon' onClick={()=>setIsMobile(!isMobile)}>
           {isMobile? <i className='fas fa-times'></i>:<i className='fas fa-bars' ></i>}
          </button>
      </nav>
      <div>
      <Routes>
        <Route path='business'  element={<Business/>}/>
        <Route path='health'    element={<Health/>} />
        <Route path='science'   element={<Science/>} />
        <Route path='sports'    element={<Sports/>} />
        <Route path='tech'      element={<Technology/>} />
        <Route path='fun'       element={<Entertainment/>} />
        </Routes>
      </div>             
    </>
  )
}
user_86908570
Related