返回React-Router <Route> 在開關中不起作用

Question

我以一種非常模塊化的方式編寫了我的應用程序，每個包（應用程序的一部分）都是一個包，我從每個包中返回的唯一東西是<Route to="/dest" component="something" /> 。

我現在遇到的問題是，這種返回方法並沒有真正起作用，這就是我測試它的方式：

初始設置是這樣的：

<Switch>
 <Dashboard {...rest} />
 <Users {...rest} />
 <Quiz {...rest} />
</Switch>

儀表板組件是這樣的：

...
return (
    <Route exact path="/" render={ props => (
      <Dashboard {...props} {...stuff} />
    )}/>
  )

用戶和測驗組件幾乎相同，它們直接從模塊包導入。

當我運行應用程序時，我可以訪問Dashboard和Users但沒有渲染Quiz 。 如果我更改訂單並將測驗放在<Users />之上，它將起作用。 這意味着它只能在第一個確切路線后渲染一個。

但相反，如果我拿走所有這些代碼並在交換機中編寫路由而不引用另一個組件，它就像一個魅力。

<Switch>
 <Route exact path="/" render={ props => (
  <div>demo</div>
 )}/>
 <Route path="/dashboard" render={ props => (
  <div>demo</div>
 )}/>
 <Route path="/users" render={ props => (
  <Users />
 )}/>
 <Route path="/quiz" component="Users"/>              
</Switch>

我已經嘗試了兩個組件，並在路線渲染，這只是一個樣本

關於為什么會發生這種情況的任何建議？

更新1

我還沒有弄清楚問題是什么以及導致它的原因，但我通過創建一個返回Switch並將Routes作為子項的組件來找到解決方法。 然后我將Switch導出到我的主應用程序。

Answer 1

<Switch>
  <Dashboard {...rest} />
  <Users {...rest} />
  <Quiz {...rest} />
</Switch>

這不起作用，因為Switch期望Route s成為直接子節點。 它無法在任意包裝器組件上執行其邏輯。

我不確定這是否可行，但您必須直接從模塊導出Route：

Dashboard.js

export default (
  <Route exact path="/" render={ props => (
    <Dashboard {...props} /> 
  )}/>
)

但是當你做這樣的事情時：

export default (stuff) => (
  <Route exact path="/" render={ props => (
     <Dashboard {...props} {...stuff} />
  )}/>
)

請注意，您不是導出Route而是導出呈現Route的功能組件。

我個人認為你應該只導出純粹的組件，而不是在沒有Route的情況下進行渲染，並將其留給庫消費者。