[英]React `react-router-dom` always show the `NotFound` page, home page active class not removed as well
I am using "react-router-dom": "^6.4.1"
with my current app.我在当前的应用程序中使用
"react-router-dom": "^6.4.1"
。 I am getting 2 issues.我有 2 个问题。
when navigating to other page, home page active
class not removed.导航到其他页面时,未删除主页
active
class。 still both new page and home page are having active
class name.新页面和主页仍然具有
active
的 class 名称。
I am always with NotFound
page.我总是在
NotFound
页面。 even when i click on other page, I am in the NotFound
page.即使当我点击其他页面时,我也在
NotFound
页面中。
Anyone help me to understand the issue what I am running with?任何人都可以帮助我了解我正在运行的问题吗?
Code for scenario 1:方案 1 的代码:
{links.map(({ name, path }, index) => {
return (
<li key={index}>
<NavLink
onClick={() =>
setIsNavShowing((prev) => !prev)
}
to={path}
className={({ isActive }) =>
isActive ? 'active-nav' : ''
}
>
{name}
</NavLink>
</li>
);
})}
Senario 2:情景 2:
const App: FC = () => {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="gallery" element={<Gallery />} />
<Route path="home" element={<Home />} />
<Route path="plans" element={<Plans />} />
<Route path="trainers" element={<Trainers />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
};
Link array:链接数组:
export const links:TypeLink[] = [
{
name: "Home",
path: '/'
},
{
name: "About",
path: '/about'
},
{
name: "Gallery",
path: '/gallery'
},
{
name: "Plans",
path: '/plans'
},
{
name: "Trainers",
path: '/trainers'
},
{
name: "Contact",
path: '/contact'
}
]
The active NavLink
link issue can be resolved by specifying the end
prop.可以通过指定
end
属性来解决活动的NavLink
链接问题。
declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
If the
end
prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched.如果使用了
end
属性,它将确保该组件在其后代路径匹配时不会被匹配为“活动”。
{links.map(({ name, path }, index) => {
return (
<li key={index}>
<NavLink
onClick={() =>
setIsNavShowing((prev) => !prev)
}
end // <-- specify end prop
to={path}
className={({ isActive }) => (isActive ? "active-nav" : "")}
>
{name}
</NavLink>
</li>
);
})}
The only issue I see with the routes is that the Home
component is being rendered on "/home"
instead of "/"
like the link is linking to.我在路由中看到的唯一问题是
Home
组件正在"/home"
而不是"/"
上呈现,就像链接链接到的那样。
<Routes>
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="gallery" element={<Gallery />} />
<Route path="/" element={<Home />} /> // <-- render on "/" instead of "/home"
<Route path="plans" element={<Plans />} />
<Route path="trainers" element={<Trainers />} />
<Route path="*" element={<NotFound />} />
</Routes>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.