I have made two routes.

The problem is that when I go into the ‘Main’ component, I also get a ‘NotFound’ page at the bottom.

What should I do?
I’ve been trying everything for 10 hours and I’m not quite sure where I’m going wrong.

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'

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


export default hot(module)(App);

index.tsx

ReactDOM.render(
 
    

    <BrowserRouter>
    <App />
    </BrowserRouter>,


  document.getElementById('root')
);

>Solution :

Issue

You are not rendering the Route components into the Switch, so the Switch is returning the QueryClientProvider which then renders routes inclusively like a Router would.

Solution

Move the Switch into the QueryClientProvider component so it can match and render single routes as expected.

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