如果反应路由器中不存在id，如何将带有id的路由重定向到未找到

Question

我有一条 ID 为 patients/:id 的路线。我在这样的浏览器中输入路线 patients/10，它显示了 ID 为 10 的患者的数据。问题是当我输入数据库中不存在的 ID 时，它 returns 空白数据.我的期望是，它 returns 到第 404 页或类似的页面。我有办法做到吗？

Answer 1

首先，您检查数据库中是否存在数据。如果数据在数据库中存在，则它重定向为 patients/10 URL 否则它会重定向到 /error-page （错误页面路由名称）。

Answer 2

是的，您可以通过在 API 调用中放置一个条件来实现此目的，即，如果您的 API 抛出 404 错误，那么您只需重定向到 404 页面，使用 this.props.history.push('/404')，这是一个例子，你可以作为参考。

Answer 3

是的，这是可能的。我假设您的 React 前端正在为每个患者查询服务器。

在页面上发出请求后，您可以检查响应正文是否为空。如果为空，可以重定向到404。如果有数据，可以继续在页面打印数据。

const isEmpty = Object.keys(obj).length === 0;
if isEmpty(response) {
    return <Redirect to="/your-404-route" />
}
// continue to print details below

Answer 4

只需使用 react-router-dom

中的 Navigate 或 useNavigate hook

从“react-router-dom”导入{useNavigate}；让 navigate = useNavigate();

    useEffect(() => {
       apiCall().then((response) => {
         setData(response.data)
      }).catch((error)=>{
          const {response} = error.response.data
            if (response.statusText === 404){
              navigate("/errorpage");
            }
        })
     },[]);

如果反应路由器中不存在id，如何将带有id的路由重定向到未找到

How to redirect route with id to not found if id doesn't exist in react router

javascript

typescript

reactjs

react-router-dom