我尝试隐藏横幅和类别组件 whlle 路线是 AuthRoute 和 ProductRoute

Question

<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>

默认路线有主路径和横幅和类别组件，但是当我尝试走另一条路线时，没有任何变化，我的组件没有在屏幕上呈现任何人都知道发生了什么事

Answer 1

在 Switch 组件中，路径顺序和特异性很重要。

Switch

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

按路径特异性降序排列路由，即 "/path1/path2" 比 "/path1" 更具体，比 "/" 更具体。对于代码段中的特定代码，您只需将 "/" 路径移动到 Switch 中的最后一个，这样就可以首先匹配其他更具体的路径。

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

我尝试隐藏横幅和类别组件 whlle 路线是 AuthRoute 和 ProductRoute

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

reactjs

react-router

react-router-dom