I try the hide banner and categories component whlle routes are AuthRoute and ProductRoute-CodePudding

<React.Fragment>
  <div style={{"height": "100vh",
  }}>
   <Navbar/>
    <Switch>

      <Route path={"/"} component={DefaultRoutes} />
      <Route path="/auth/login" component={AuthRoutes} />
      <Route path={"/product/:id"} component={ProductRoutes} />
    </Switch>
  </div>
</React.Fragment>

Default route has main path and have banner and categories component but when ı try go anoher route nothing change and my component not render in screen anybody know whats going on

CodePudding user response：

Within the Switch component, path order and specificity matters.

Switch

Renders the first (emphasis mine) child <Route> or <Redirect> that matches the location.

Order the routes in decreasing order by path specificity, i.e. "/path1/path2" is more specific than "/path1" is more specific than "/". For the specific code in your snippet you can just move the home "/" path to be last in the Switch so the other more specific paths can possibly be matched first.

<Switch>
  <Route path="/auth/login" component={AuthRoutes} />
  <Route path={"/product/:id"} component={ProductRoutes} />
  <Route path={"/"} component={DefaultRoutes} />
</Switch>