返回的 React-Router <Route> 在 switch 中不起作用

Question

我以非常模块化的方式编写了我的应用程序，每个包（应用程序的一部分）都是一个包，我从每个包返回的唯一内容是<Route to="/dest" component="something" />.

我现在遇到的问题是，这种返回方法并没有真正起作用，这就是我测试它的方式：

初始设置是这样的：

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

仪表板组件是这样的：

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

对于 User 和 Quiz 组件几乎是一样的，它们是直接从它们的模块包中导入的。

当我运行应用程序时，我可以访问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

我还没有弄清楚问题是什么以及是什么导致了它，但是我通过创建一个返回 aSwitch和 directRoutes作为子项的组件找到了解决方法。然后我将其导出Switch到我的主应用程序。

Answer 1

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

这不会起作用，因为Switch期望Routes 是直接子代。它无法在任意包装器组件上执行其逻辑。

我不确定这是否有效，但您必须直接从模块导出路线：

仪表板.js

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

但是当你做这样的事情时：

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

请注意，您导出的不是一个Route渲染路由的功能组件，而是一个函数组件。

我个人认为您应该只导出要在没有Routes 的情况下渲染的纯组件，并将其留给库使用者。