react-router-dom：如何設置Route以便在兩個路徑中的任何一個路徑上渲染組件？

Question

在我當前的項目中，我有一個<Header />組件，僅當用戶在“ / library”或“ / admin”處查看頁面時，才想渲染該組件。 我發現自己有些困惑，但因為我下面的示例中的文檔設置一下， 在這里 ，但我得到一個錯誤的控制台時，我這樣做。

我的路線如下：

<Route
  path={['/admin', '/library']}
  render={props => (
    <Header {...props} />
  )}
/>

這可以正常工作， <Header />組件僅在與那些路徑匹配時才會呈現，但是我仍然在控制台中看到以下錯誤：

警告：prop類型失敗：提供給Route的類型為array prop path無效，預期為string 。

鑒於我與文檔中的示例匹配，我驚訝於出現上述錯誤。 有我不正確理解的東西嗎？ 這是我感到困惑的主要部分，它使我想知道我是否做錯了什么，特別是因為盡管有錯誤消息，我的代碼仍能按預期工作。

我正在使用React v16.6和react-router-dom v4.3.1。

Answer 1

正如您在嘗試設置時所提到的，您會看到它確實有效。 由於道具類型，您將收到此警告。 我猜是在4.4.0-beta.4版本中解決了。 這個版本還解決了其他一些問題，而我上面給出的鏈接實際上提到了這些問題。

因此，嘗試升級到next ：

yarn add react-router-dom@next react-router@next  

Answer 2

錯誤消息告訴您路徑不使用數組，而只是一個字符串。

要執行您需要的操作，只需創建2條這樣的路線條目

<Route
  path={'/admin'}
  render={props => (
    <Header {...props} />
  )}
/>
<Route
  path={'/library'}
  render={props => (
    <Header {...props} />
  )}
/>