[英]How to build a 404 page with react-router-dom v6
I just upgraded to v6beta for react-router-dom because I wanted to organize my routes, but the 404 page is now broken:我刚刚为 react-router-dom 升级到 v6beta,因为我想组织我的路由,但是 404 页面现在坏了:
export function AllRoutes(props) {
return(
<Routes>
<Route path="/about-us">
<Route path="contact"> <AboutContact/> </Route>
<Route path="our-logo"> <AboutLogo/> </Route>
<Route path="the-mission"> <AboutMission/> </Route>
<Route path="the-team"> <AboutTeam/> </Route>
<Route path="our-work"> <AboutWork/> </Route>
</Route>
<Route path="/user">
<Route path="sign-in"> <UserSignIn/> </Route>
<Route path="sign-up"> <UserSignUp/> </Route>
</Route>
<Route path="/">
<Home/>
</Route>
<Route >
<NotFound/>
</Route>
</Routes>
)
}
So everything works as expected (including the home page) except the not found page, which does not work even when adding path="/*"
or path="*"
所以一切都按预期工作(包括主页),除了未找到的页面,即使添加path="/*"
或path="*"
也不起作用
Any easy solution for this?有什么简单的解决方案吗?
<Routes>
// Use it in this way, and it should work:
<Route path='*' element={<NotFound />} />
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/settings" element={<Settings />} />
</Routes>
React Router v6 does not use exact attribute to match the exact routes. React Router v6 不使用精确属性来匹配精确路由。 By default it matches the exact route.默认情况下,它匹配确切的路线。 To match any value use "*" in the route path.要匹配任何值,请在路由路径中使用“*”。
<BrowserRouter>
<div className="App">
<Header />
</div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/profile" element={<Profile />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter> enter code here
react router v6 don't have Switch so you need to declare path='*' react router v6 没有 Switch 所以你需要声明 path='*'
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact/>} />
<Route path="*" element={<NotFound/>} />
</Routes>
</BrowserRouter>
Just you have to do is render a Route with a path of *, and React Router will make sure to only render the element if none of the other Routes match.只需要渲染一个路径为 * 的 Route,React Router 将确保仅在其他 Route 都不匹配时才渲染元素。 (if your 404 component name is PageNotFound> (如果您的 404 组件名称是 PageNotFound>
<Route path="*" element={<PageNotFound/>} /> <Route path="*" element={<PageNotFound/>} />
1 Stackblitz link (its implementation is a little bit different) 1 Stackblitz链接(它的实现有点不同)
try this is code:试试这是代码:
export function AllRoutes(props) {
return(
<Routes>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/about-us">
<Route path="contact"> <AboutContact/> </Route>
<Route path="our-logo"> <AboutLogo/> </Route>
<Route path="the-mission"> <AboutMission/> </Route>
<Route path="the-team"> <AboutTeam/> </Route>
<Route path="our-work"> <AboutWork/> </Route>
</Route>
<Route path="/user">
<Route path="sign-in"> <UserSignIn/> </Route>
<Route path="sign-up"> <UserSignUp/> </Route>
</Route>
<Route path="*">
<NotFound/>
</Route>
</Switch>
</Routes>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.