我创建了组件NotFound
,当我转到一个不存在的页面时,它可以正常工作。但是同一个页面它出现在我所有的页面中,而不仅仅是不存在的页面。这是组件:
import React from 'react'
const NotFound = () =>
<div>
<h3>404 page not found</h3>
<p>We are sorry but the page you are looking for does not exist.</p>
</div>
export default NotFound
这是我在主页中使用它的方式:
class MainSite extends Component {
render () {
return (
<div>
{/* Render nav */}
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
{/* Dashboard page */}
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
{/* Retrospectives page */}
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
{/* Users page */}
<ProtectedRoute exact path='/users' component={UsersPage} />
{/* Projects page */}
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
{/* Retrospective related pages */}
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
<Route exact path='/join-retrospective' component={JoinRetrospective} />
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
{/* OnBoarding pages */}
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
<Route exact path='/auth-handler' component={AuthHandler} />
<Route exact path='/join-organization' component={JoinOrganization} />
</div>
)
}
}
export default MainSite
正如你所看到的,我使用<Route path="*" component={NotFound} />
来创建404页面,但是该组件也出现在每个现有页面中。我该如何解决这个问题?
7条答案
按热度按时间vhmi4jdf1#
试试这个:
jhdbpxl92#
下面的例子都很好:
或者如果你想返回一个简单的404消息,不带任何组件:
dwbf0jvd3#
对于那些正在使用
react-router-dom
v6寻找答案的人来说,很多事情已经改变了。例如Switch
不再存在,你必须使用element
而不是component
,...检查这个小例子来让你有个想法:这样你就定义了你的
home
路由,所有其他路由都将显示404。查看official guide以获取更多信息。5us2dqdw4#
试试这个:
eivnm1vs5#
只需从
react-router-dom
导入Switch
,并将所有路由 Package 在交换机组件中。(就在你的switch结束标签之前)这样它会首先将每个组件与其路由进行匹配。如果匹配,它会渲染该组件,否则检查下一个。最终如果没有找到匹配的路由,它将呈现404Pagevwoqyblh6#
react router是一个让新手头疼的问题。使用这种代码格式。这是类组件,但你可以制作一个功能组件并使用它。
lnvxswe27#