React访问Main组件时同时显示NotFound页面的路由问题如何解决？

问题根因 #

这个问题是Switch组件的使用规则错误导致的。
react-router-dom v5 版本的Switch组件仅能将直接子元素为Route或Redirect的节点作为匹配校验对象，你当前把QueryClientProvider放在了Switch的直接子节点位置，Switch无法识别嵌套在QueryClientProvider内部的Route规则，会直接将整个QueryClientProvider渲染出来，内部的两个Route不会走Switch的唯一匹配逻辑，只要路径匹配就会全部渲染，所以访问/路径时，/规则命中渲染Main，*通配规则也命中渲染NotFound，两个组件就会同时显示。

修复方案 #

1. 把QueryClientProvider移到Switch外层
2. 补充缺失的QueryClient实例化代码

修复后的app.tsx代码如下：

import NoProduct from './pages/Product/NoProduct'
import NotFound from './pages/NotFound/NotFound'
import { hot } from "react-hot-loader";
import { QueryClient ,QueryClientProvider } from 'react-query'
import { Route,BrowserRouter, Redirect, Switch, useLocation} from 'react-router-dom';
import Main from './pages/Main/Main'

// 补充实例化QueryClient的代码，原代码遗漏这行会导致queryClient变量未定义
const queryClient = new QueryClient()

function App() { 
  return (
    <div>
      {/* 将QueryClientProvider移到Switch外层 */}
      <QueryClientProvider client={queryClient}>
        <Switch>
          <Route exact path="/" component={Main} />
          <Route path="*" component={NotFound} />
        </Switch>
      </QueryClientProvider>
    </div>
   ) 
 }

export default hot(module)(App);

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