How to redirect page using Route? - react-router

Question

I kinda wanna do a function that when i click on every item in the navbar and even the submenu in each item, it will rediret me to a new page with relevant information, i thought of using Route inside my Link tag but i kinda stuck in how to do that. Should i use Route or other codes to achive this task? I'd like to hear recommendations from you guys, thank you btw!
Navbar.js:
import React, { useState } from "react";
import { navItems } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./Navbar.css";
import DropDown from "./DropDown";
function Navbar() {
const [dropDown, setDropdown] = useState(false);
return (
<div>
<ul className="nav-items">
{navItems.map((item) => {
if (item.title === "Services") {
return (
<li
onClick={() => setDropdown(!dropDown)}
key={item.id}
className={item.cName}
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
>
<Router>
<Link to={item.path}>{item.title}</Link>
</Router>
{dropDown && <DropDown />}
</li>
);
}
return (
<Router>
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
</Router>
);
})}
</ul>
</div>
);
}
export default Navbar;
DropDown.js:
import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./DropDown.css";
function DropDown() {
return (
<div>
<ul className="subnav-items">
{serviceDropdown.map((item) => {
return (
<Router>
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
</Router>
);
})}
</ul>
</div>
);
}
export default DropDown;
Sandbox link: https://codesandbox.io/s/dropdown-menu-ho4h8?file=/src/components/DropDown.js:0-560

Answer 1

One possible solution would be to use the useHistory hook from react-router and use the push method to move to a different page. The code would look as follows
const history = useHistory();
// Use the onClick props of your dropdown element
onClick={() => history.push("other URL");}