Question

我正在制作React应用，并且我有一些路由器。

const App = () => {
  return  (
    <div>
      <Header/>
      <div>
        <Route path="/LogIn" render={() => <LogIn />} />
        <Route path="/Shop" render={() => <GoodsContainer />} />
        <Route path="/Delivery" render ={() => <Delivery />} />
      </div>
      <Footer />
    </div>
  )
}

当我第一次打开页面时，只有Header组件和Footer组件，这在逻辑上是因为url没有包含我设置为Routes的路径。

因此，我的问题是如何始终显示，例如用户打开网站时的路线<Route path="/Shop" render={() => <GoodsContainer />} />。

Redirect不是我的解决方案。

Answer 1

path属性可以是字符串或字符串数组。您可以使用字符串数组作为GoodsContainer属性的值来为path组件定义多个路径

<Route path={["/", "/Shop"]} render={() => <GoodsContainer />} />

别忘了在exact组件上使用Route道具，或者用Route组件包装所有Switch组件，否则/路径将匹配所有其他路线。

Answer 2

您可以检查@Yousef的答案，如果您没有通过任何道具，也可以这样做。不要忘记给exact

 <Route path={["/", "/Shop"]} exact render={GoodsContainer} />

但是，如果您通过，那就这样做

 <Route path={["/", "/Shop"]} exact render={(props)=> <GoodsContainer {...props} />} />

如何在React中确定路由的优先级？

2 个答案: