React 中处理 404 page not found _生活知道

使用通配符占位符来处理在 React 路由中找不到的 404 页面，例如 <Route path=&34; element={<PageNotFound />} />。带有星号 * 的路由用作一条全能路由。它仅在没有其他路由匹配时匹配。
import React from &39;;
import {Route, Link, Routes} from &39;;
export default function App {
return ;
}
【React 中处理 404 page not found】function Home {
return <h2>Home</h2>;
}
function About {
return <h2>About</h2>;
}
function PageNotFound {
return ;
}
我们使用了不匹配的路由。
{/* ? 仅在没有其他路由匹配时才匹配 */}
<Route path=&34; element={<PageNotFound />} />
* 通配符语法只能用在路径的末尾。
路径等于 * 的路由是一条可以匹配任何请求的路由。它仅在没有其他路由匹配时匹配。
如果用户导航到 / 或 /about，他们将获得我们为这些路由设置的组件，但是，如果他们导航到任何其他页面，他们将获得 PageNotFound 组件。
处理 React 路由中未找到的 404 页面的另一种方法是，当用户尝试转到不存在的页面时，将用户重定向到不同的页面。
import React from &39;;
import {Route, Link, Routes, Navigate} from &39;;
export default function App {
return ;
}
function Home {
return <h2>Home</h2>;
}
function About {
return <h2>About</h2>;
}
在示例中，如果他们匹配不存在的路由，我们没有渲染 PageNotFound 组件，而是将用户重定向到 /。
<Route path=&34; element={<Navigate to=&34; />} />
每次他们转到没有任何匹配项的路由时我们使用 Navigate 元素将用户重定向到 /。
以上就是朝夕生活（www.30zx.com）关于“React 中处理 404 page not found”的详细内容，希望对大家有所帮助！

React 中处理 404 page not found

猜你喜欢