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

Question

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

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

初始设置是这样的:

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

Dashboard 组件是这样的:

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

I've tried both component, and render in route, this one is just a sample

关于为什么会发生这种情况的任何建议？

更新 1

我还没有设法弄清楚问题是什么以及是什么导致了它，但我通过创建一个返回 Switch 的组件找到了解决它的方法。并直接Routes作为 child 。然后我导出了Switch到我的主要应用程序。

Answer 1

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

这行不通，因为 Switch期望 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 的情况下呈现的纯组件，并将其留给库使用者。