React Router默认路由总是执行，strikingDash模板修改URL路由匹配异常

问题根源 #

1. Switch组件用法错误（核心原因）
   react-router v5的<Switch>仅支持将<Route>、<Redirect>作为直接子节点，你将<Suspense>放在<Switch>的直接子层级，导致Switch无法正常识别内部的路由规则，无法实现「匹配到第一个符合规则的路由就停止匹配」的短路逻辑，因此所有Route包括兜底的NotFound都会被渲染，就出现了同时打印匹配路由和NOT FOUND日志的问题。
2. App.js根路由无exact属性（加剧重复渲染）
   App.js里定义的<Route path="/" component={Auth} />没有加exact属性，所有路径都会命中这个路由规则，加上路径变化触发的重定向逻辑，就会导致组件重复渲染，日志重复打印。

修复步骤 #

第一步：修改auth.js里的Switch层级 #

把<Suspense>放到<Switch>外面，让Switch直接包裹所有Route节点，修改后的代码片段：

const FrontendRoutes = () => {
  return (
    <Suspense
      fallback={
        <div className="spin">
          <Spin />
        </div>
      }
    >
      <Switch>
        <Route exact path="/verification" component={VerificationPage} />
        <Route exact path="/email-confirmation" component={EmailConfirmation} />
        <Route exact path="/forgetPassword" component={ForgetPassword} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/" component={Login} />
        <Route component={NotFound} />
      </Switch>
    </Suspense>
  )
}

第二步：给App.js的根路由添加exact属性 #

修改App.js里的路由定义：

{!isLoggedIn ? <>{console.log("INSIDE PUBLIC")}<Route exact path="/" component={Auth} /></> : <ProtectedRoute path="/admin" component={Admin} />}

第三步（可选）：优化路径监听逻辑 #

App.js里手动监听路径变化的useEffect可以直接删除，react-router本身会处理路径变化的响应，手动监听会增加不必要的状态更新和重渲染。 #

修复验证 #

修改完成后切换URL，Switch会仅匹配第一个符合规则的Route，不会再触发NotFound组件渲染，控制台也不会重复打印日志，符合预期行为。

内容的提问来源于stack exchange，提问作者Hassam Saeed