xxxxxxxxxx
import { BrowserRouter, Routes } from 'react-router-dom';
import Home from './Home';
import Filter from './Filter';
function Router() {
return (
<BrowserRouter>
<Routes path="/Home" component={Home} />
<Routes path="/Filter" component={Filter} />
</BrowserRouter>
)
}
export default Router;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
xxxxxxxxxx
npm install react-router-dom
#to install a specific version use:
npm install react-router-dom@5.2.0
#or to just install the latest version use
npm install react-router-dom@latest
xxxxxxxxxx
import {
useState,
useEffect,
useRef
} from "react";
import Dropdown from "./Dropdown";
const MenuItems = ({
items,
depthLevel
}) => {
const [dropdown, setDropdown] = useState(false);
let ref = useRef();
useEffect(() => {
const handler = (event) => {
if (dropdown && ref.current && !ref.current.contains(event.target)) {
setDropdown(false);
}
};
document.addEventListener("mousedown", handler);
document.addEventListener("touchstart", handler);
return () => {
// Cleanup the event listener
document.removeEventListener("mousedown", handler);
document.removeEventListener("touchstart", handler);
};
}, [dropdown]);
const onMouseEnter = () => {
window.innerWidth > 960 && setDropdown(true);
};
const onMouseLeave = () => {
window.innerWidth > 960 && setDropdown(false);
};
return ( <
li className = "menu-items"
ref = {
ref
}
onMouseEnter = {
onMouseEnter
}
onMouseLeave = {
onMouseLeave
} >
{
items.submenu ? ( <
>
<
button type = "button"
aria - haspopup = "menu"
aria - expanded = {
dropdown ? "true" : "false"
}
onClick = {
() => setDropdown((prev) => !prev)
} >
{
items.title
} {
" "
} {
depthLevel > 0 ? < span > & raquo; < /span> : <span className="arrow" / >
} <
/button> <
Dropdown depthLevel = {
depthLevel
}
submenus = {
items.submenu
}
dropdown = {
dropdown
}
/> <
/>
) : ( <
a href = "/#" > {
items.title
} < /a>
)
} <
/li>
);
};
export default MenuItems;