自定义 404 页面 React Router 显示在所有页面上

Question

我正在尝试呈现自定义 404 页面。从文档和大多数人的建议来看，实现这一目标的最佳方法是：

<BrowserRouter>
<Switch>
<Route exact path="/" component={Home}/>
....a bunch of other routes
<Route path="*" components={NotFound}/>
</switch>
</BrowserRouter>

问题是在每个组件的底部呈现这些东西。关于为什么会这样的任何见解...？

Answer 1

我建议你使用Switch JSX元素。 使用交换机时，将仅呈现一个路由器。

我看到你已经在使用它了。 似乎您在结束标记中有一个拼写错误，它应该是带有第一个大写字母的 Switch，您应该传递组件 prop 而不是组件

此外，尝试省略 404 Route 元素中的路径，仅传递组件。

Answer 2

问题只是元素，当它会感应到大写字母时它将工作并且不会呈现"找不到页面"。 就像其他人说的那样，将组件更改为组件：(