javascript - 如何使用 react-router 制作“404 - Not Found”页面/路由?
问题描述
如何使用 React-Router 在 React 中添加 404 - Not Found 页面?
这是我的尝试:
// routes.tsx
export const routes = [
{
path: '/students',
render: (props: any) => <List {...props} title={`Students`} />,
},
{
path: '/teachers',
render: (props: any) => <List {...props} title={`Teachers`} />,
},
]
// App.tsx
import { routes } from './routes'
function App() {
const routeComponents = routes.map(({ path, render }, key) => (
<Route exact path={path} render={render} key={key} />
))
return (
<ThemeProvider theme={theme}>
<CSSReset />
<Suspense fallback={<Loader />}>
<Router>
<Switch>
<Route exact path="/" component={Signin} />
<Route path="/signin" component={Signin} />
<Layout>{routeComponents}</Layout>
{/* <Route component={NotFound} /> */}
<Route path="*" component={NotFound} />
</Switch>
</Router>
</Suspense>
</ThemeProvider>
)
}
export default App
但是当我转到“http://localhost:3000/nothing”时,我看不到我的自定义“404 - 未找到”页面,但是<Layout />
组件。
我做错了什么?
堆栈:TypeScript、React@v16.13.1、react-router-dom@v5.1.2
解决方案
404 响应页面不需要路径,因为它需要是在您已经拥有的页面路径之间找不到 roue 时呈现的页面。它应该以这种方式工作:
<Switch>
<Route exact path="/" component={Signin} />
<Route path="/signin" component={Signin} />
{routeComponents()}
<Route component={NotFound} />
</Switch>
推荐阅读
- go - 命名 cookie 不存在
- flutter - 从 Provider 移动到 GetX 并且无法 Get.find 正确的 Controller
- rust - 如何在 solana 上获得程序作者?
- c# - 轴对象 - 自动间隔没有正确的值
- docker - 为什么我的 docker 镜像在 AWS ECS (Fargate) 中作为任务运行时会失败?
- ios - 带有 iframe 的 iOS 无法显示 H5 网页
- python-3.x - 将induvial索引的数学运算映射到3维数组中的每个数组
- django - Django DRF:ModelMixin Viewset:如何创建视图集以获取用户详细信息并编辑用户详细信息,而无需在 url 中传递 id
- javascript - 使用 okotkit 从 github API 嵌套 fileTree
- excel - 多个标准的平均值