After building the react environment with react-create-app --typescript, I used the Route, Redirect, and Switch functions with react-router-dom.

App.tsx

  <Switch>
    <QueryClientProvider client={queryClient}>
    <Redirect exact path="/" to="/main" />
    <Route path="/main" component={Main} />
    <Route path="/product/:id" component={Product} />
    <Route path="/search" component={Search} />
    </QueryClientProvider>
    </Switch>

index.tsx

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

Strangely dynamic page www.localhost:3000/product/1 2 3 4

In this way, if you try to enter after entering the domain, you will automatically be directed to the main page.

And click the dynamic id value on the main page to move to the id value detail page. If you refresh the detail page, you are automatically moved to the main main page. Why are you doing this? Redirect is not used.

I can't find the problem.

If you refresh the search component page other than the main page, you will be redirected to the main main page. I really don't know why this is.