使用通配符占位符来处理在 React 路由中找不到的 404 页面,例如 <Route path=&34; element={<PageNotFound />} /> 。 带有星号 * 的路由用作一条全能路由。 它仅在没有其他路由匹配时匹配。
import React from &39;;
import {Route, Link, Routes} from &39;;
export default function App {
return ;
}
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”的详细内容,希望对大家有所帮助!