我正在使用 React 18.0 和 react-router-dom 5.3。我有一个导航组件
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { LINK, STATIC_NAMES } from "../../../constants/constants";
import { DashboardContext } from "../../../context/DashboardContextApi";
import { GlobalContext } from "../../../context/GlobalContextApi";
const Navigation = () => {
const { menu, staticList } = useContext(GlobalContext);
const { chartsType } = useContext(DashboardContext);
const currentPath = window.location.href.split("/").pop();
const StaticItems = [
{
id: 1,
title: "Shows",
slug: "programme-lists",
url: "/programme-lists",
},
{
id: 2,
title: "Podcast",
slug: "podcast",
url: "/podcast",
},
{
id: 3,
title: "Rjs",
slug: "our-rjs",
url: "/our-rjs",
},
];
const NavMenu = menu?.category?.slice(0, 2)?.map((el) => {
if (el.sub_home_categories?.length) {
return (
<DropMenu
key={el.id}
dropItems={el}
currentPath={currentPath}
/>
);
} else {
return (
<NavItem
key={el.id}
url={`${
el.slug === STATIC_NAMES.TASBIR
? `/${LINK.GALLERY}/${el.slug}`
: el.slug === STATIC_NAMES.VIDEO
? `/${LINK.GALLERY}/${el.slug}`
: `/${LINK.CATEGORY}/${el.slug}`
}`}
title={el.name}
label={el.name}
slug={el.slug}
currentPath={currentPath}
/>
);
}
});
return (
<div className="navigation_box mains" id="root-abc">
<ul>
<li className="dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
title="About"
>
About
</a>
<ul className="dropdown-menu">
{staticList?.map((el) => (
<li>
<Link
to={`/${LINK.STATIC}/${el.slug}`}
title={el?.title}
className={
currentPath == el?.url ? "selected" : ""
}
>
{el?.title}
</Link>
</li>
))}
</ul>
</li>
{StaticItems.slice(0, 2).map((el) => (
<li key={el.id}>
<NavItem
title={el.title}
slug={el.slug}
currentPath={currentPath}
url={el.url}
label={el.title}
/>
</li>
))}
<li className="dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
style={{ cursor: "pointer" }}
title="Charts"
>
Charts
</a>
<ul className="dropdown-menu">
{chartsType?.map((el) => {
if (el?.countdowns?.length > 0)
return (
<li>
<Link
to={{
pathname: `/${LINK.CHARTS}/${el?.slug}`,
state: { category: el?.title },
}}
className={
currentPath == el?.slug
? "selected"
: ""
}
title={el?.title}
>
{el?.title}
</Link>
</li>
);
})}
</ul>
</li>
{NavMenu}
{StaticItems.slice(2).map((el) => (
<li key={el.id}>
<NavItem
title={el.title}
slug={el.slug}
currentPath={currentPath}
url={el.url}
label={el.title}
/>
</li>
))}
<li className="live-btn">
<Link to={`/${LINK.LIVE}`} title="Listen Live">
<span className="listen">Listen</span>
<span className="live-text">Live</span>
</Link>
</li>
</ul>
</div>
);
};
export default Navigation;
const NavItem = ({ url = "/", label = "", slug, currentPath }) => {
return (
<li>
<Link
to={{
pathname: url,
state: { title: label },
}}
className={currentPath == slug ? "selected" : ""}
title={label}
>
{label}
</Link>
</li>
);
};
const DropMenu = ({ dropItems, currentPath }) => {
return (
<li key={dropItems.id} className={`dropdown`}>
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
style={{ cursor: "pointer" }}
title={dropItems.name}
>
{dropItems.name}
</a>
<ul className={`dropdown-menu`}>
{dropItems.sub_home_categories.map((sub_menu) => (
<NavItem
key={sub_menu.id}
title={sub_menu.name}
slug={sub_menu.slug}
currentPath={currentPath}
url={`${
sub_menu.slug === STATIC_NAMES.TASBIR
? `/${LINK.GALLERY}/${sub_menu.slug}`
: sub_menu.slug === STATIC_NAMES.VIDEO
? `/${LINK.GALLERY}/${sub_menu.slug}`
: `/${LINK.CATEGORY}/${sub_menu.slug}`
}`}
label={sub_menu.name}
/>
))}
</ul>
</li>
);
};
这个组件用在header & Mobile Menu组件中
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import Social from "../Social";
import Navigation from "./Navigation";
import SearchForm from "../SearchForm";
import { DashboardContext } from "../../../context/DashboardContextApi";
import { GlobalContext } from "../../../context/GlobalContextApi";
const Header = ({ meta }) => {
const { setRefresh } = useContext(DashboardContext);
const { setRefreshList } = useContext(GlobalContext);
const handleApiRefresh = () => {
setRefresh(Date.now());
setRefreshList(Date.now());
};
return (
<>
<div id="sticky" className="header">
<div className="container-fluid headbox">
<div className="row headerbox ">
<div className="logo-box col-sm-3 col-md-2">
<div className="logo-item">
<Link
to={{
pathname: "/",
state: {
prev: "Home",
},
}}
title={meta?.title}
>
<img
src="/themes/radio2/images/logo.png"
alt={meta?.title}
onClick={handleApiRefresh}
/>
</Link>
</div>
<a className="search-btn btn-search" title="Search">
<span className="search-icon fa fa-search"></span>
</a>
</div>
<div className="navigation-box col-sm-6 col-md-8">
<Navigation />
</div>
<div className="navigation-box col-sm-3 col-md-2">
<div className="nav-box">
<Social meta={meta} />
</div>
</div>
</div>
</div>
</div>
{/* <!--<search option>--> */}
<div className="search-panel">
<span className="menu-close">
<span className="left-icon lnr lnr-cross"></span>
</span>
<div className="search-box">
<div className="search-form">
<SearchForm />
</div>
</div>
</div>
</>
);
};
export default Header;
import React from "react";
import Navigation from "../Header/Navigation";
import SlideNav from "../Header/SlideNav";
import Social from "../Social";
const MobileMenu = ({meta}) => {
return (
<>
<span className="menu-toggle">
<span className="left-icon lnr lnr-menu"></span>
</span>
<div className="primary-panel">
<div className="close-box">
<span className="main-title">
<span className="menu-close">
<span className="left-icon lnr lnr-cross"></span>
</span>
</span>
</div>
<div className="menu-box">
<Navigation />
<SlideNav />
<Social meta={meta}/>
</div>
</div>
</>
);
};
export default MobileMenu;
import React, { useEffect, useContext } from "react";
import { useLocation } from "react-router-dom";
import LivePlayer from "../LivePlayer/LivePlayer";
import PopupNotice from "../PopupNotice/PopupNotice";
import ScrollTop from "./ScrollTop";
import MobileMenu from "./MobileMenu";
import Wrapper from "./Wrapper";
import Error from "../../../pages/404/Error";
import { GlobalContext } from "../../../context/GlobalContextApi";
const Layout = ({ children }) => {
const { state, pathname } = useLocation();
const { global } = useContext(GlobalContext);
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
if (state?.from == "NOTFOUND") {
return <Error />;
}
return (
<>
<LivePlayer />
{/* <PopupNotice /> */}
<MobileMenu meta={global} />
<Wrapper children={children} />
<ScrollTop />
<div className="mask-box"></div>
</>
);
};
export default Layout;
const App = () => {
return (
<Router>
<Layout>
<Switch>
<Route path={HOME.INDEX} exact component={Home} />
<Route path={NEWS.INDEX}>
<NewsPage />
</Route>
<Route path={NEWS_DETAIL.INDEX}>
<SingleNews />
</Route>
<Route path={ABOUT.INDEX}>
<AboutPage />
</Route>
<Route path={PROGRAMME.INDEX}>
<ShowsPage />
</Route>
<Route path={PROGRAMDETAIL.INDEX}>
<ProgramDetailPage />
</Route>
<Route path={LIVE.INDEX}>
<LivePage />
</Route>
<Route path={PODCAST.INDEX}>
<PodcastPage />
</Route>
<Route path={PODCASTDETAIL.INDEX}>
<PodcastDetailPage />
</Route>
<Route path={PHOTO.INDEX}>
<PhotoPage />
</Route>
<Route path={PHOTODETAIL.INDEX}>
<PhotoDetailPage />
</Route>
<Route path={VIDEODETAIL.INDEX}>
<VideoDetailPage />
</Route>
<Route path={RJS.INDEX}>
<RjsPage />
</Route>
<Route path={TEAM.INDEX}>
<TeamPage />
</Route>
<Route path={FEATUREDARTIST.INDEX}>
<FeaturedArtistPage />
</Route>
<Route path={RJDETAIL.INDEX}>
<RjDetailPage />
</Route>
<Route path={FEATUREDARTISTDETAIL.INDEX}>
<FeaturedArtistDetailPage />
</Route>
<Route path={SEARCH.INDEX}>
<SearchPage />
</Route>
<Route path={CHARTS.INDEX}>
<ChartsPage />
</Route>
<Route path={ERROR.INDEX}>
<Redirect
to={{ ...location, state: { from: "NOTFOUND" } }}
/>
</Route>
</Switch>
</Layout>
</Router>
);
};
export default App;
import React, { useContext } from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import { GlobalContext } from "../../../context/GlobalContextApi";
const Wrapper = ({ children }) => {
const { global } = useContext(GlobalContext);
return (
<div id="wrapper" className="wrapper">
<Header meta={global}/>
<div>{children}</div>
<Footer meta={global} />
</div>
);
};
export default Wrapper;
现在我的问题是当单击
<Navigation /><MobileMenu /><Navigation /><Header />我尝试将组件移动到
<Header/>