对404进行无休止的循环

Question

我正在完成有关响应的Udemy课程，当我尝试通过URL进行加载的活动不存在时，我遇到一个奇怪的问题（这是因为我们的UI显然不会呈现无效活动）。我确实验证了useEffect正确定义了它的依赖关系，以便不会引起通常这样的无限循环：

useEffect(() => {
      console.log("Params id: ", match.params.id);
      loadActivity(match.params.id)
    }, [loadActivity, match.params.id, history])

其中所讨论的组件具有以下签名const ActivityDetails : React.FC<RouteComponentProps<DetailParams>>，当我查看控制台日志时，我可以看到这种使用效果一直都被击中，但是有趣的是，其渲染返回（在同一组件内）的原因是没有活动返回时发生

if(!activity) {
  console.log("not activity");
  return <h2>Not Found</h2>
}

其路径在其父容器中定义如下：

 <Route key={location.key} path={['/createActivity', '/manage/:id']} 

MobX操作的定义如下：

@action loadActivity = async (id: string) => {
    let activity = this.getActivity(id);
    console.log("activity is: ", activity);
    if (activity !== undefined) {
      this.activity = activity;
    } else {
      console.log("activity is undefined");
      this.loadingInitial = true;
      try {
        activity = await agent.Activities.details(id);
        console.log("after wait, acitivty is:", activity);
        runInAction('getting activity',() => {
          console.log("Now i am running the next run in action");
          this.activity = activity;
          this.loadingInitial = false;
        })
      } catch (error) {
        runInAction('get activity error', () => {
          this.loadingInitial = false;
        })
        console.log("Error Is: ", error);
      }
    }
  }

并且我们获得活动的代理看起来如下：

const responseBody = (response: AxiosResponse ) => response.data;
const requests = {
    get : (url: string) => axios.get(url).then(responseBody),
    ...
}

const Activities = {
    details: (id: string) => requests.get(`/activities/detail/${id}`),
    ...
}

我到底在做什么错？

编辑：我不确定这是否是react生命周期的一部分，但是当我刷新该页面时，似乎触发了if（！activity）渲染，但是由于它很快，我们当然看不到它查找要渲染的活动。我对useEffect的理解是，应该在组件安装之前先触发它，在其中定义状态，然后生命周期继续进行？

Answer 1

[好的，仍然不确定为什么，但是将加载初始活动的代码从Activity.tsx文件（也就是整个父对象）移动到仪表板代码（在此处也定义为Route exact path='/activities' component={ActivityDashboard}/>似乎可以解决此问题

有人可以解释为什么吗？这是一个问题吗？我给人的印象是，只有在路径完全匹配的情况下，才可以使用exact关键字