如何解决为什么 React Router 开关总是显示第一个组件? 你可以只包装 1 个悬念,它也会起作用
我可以试试这行代码;
// This code redirect to as "/" and it's work but example when ı write "/blabla" doesn't show Errorpage
<Switch>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route exact path="/" component={Home} />
</Suspense>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route component={ErrorPage} />
</Suspense>
</Switch>
但它不会在页面上显示错误组件。 我发现了一件事,哪一个在开关的顶部。它正在显示。 示例:
// Showing Home Component
<Switch>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route exact path="/home" component={Home} />
</Suspense>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route component={ErrorPage} />
</Suspense>
</Switch>
// Showing ErrorPage component
<Switch>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route component={ErrorPage} />
</Suspense>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Route exact path="/" component={Home} />
</Suspense>
</Switch>
解决方法
你可以只包装 1 个悬念,它也会起作用
试试下面的代码,看看它是否有效
/ 将呈现 Home 和任何其他路由错误页面
<Switch>
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
//anything wrong in this wrapped suspense will execute fallback
<Route exact path="/" component={Home} />
<Route path='/' component={ErrorPage} />
</Suspense>
</Switch>
,
Route
必须是 Switch
的直接子代。所以改为这样做。
<Switch>
<Route exact path="/">
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<Home />
</Suspense>
</Route>
<Route path="*">
<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
<ErrorPage />
</Suspense>
</Route>
</Switch>
,
switch 的作用是当它匹配一条路由时,它根本不会寻找任何其他组件。它将始终呈现第一个匹配项,并且不会进一步查看。基本上,它在调试代码时很有用。 我猜在你的代码中,你必须定义一个额外的路径名来显示错误页面。 希望我的回答对您有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。