Question

我以一种非常模块化的方式编写了我的应用程序，每个包（应用程序的一部分）都是一个包，我从每个包中返回的唯一内容是| user | name | |------|-------------| | 1103 | rack-edited | | 1102 | tabs | | 1103 | aki | | 1104 | rack | | 1104 | aki |。

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

初始设置是这样的：

<Route to="/dest" component="something" />

Dashboard组件是这样的：

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

与User和Quiz组件几乎相同，它们直接从模块包中导入。

当我运行该应用程序时，我可以访问... return ( <Route exact path="/" render={ props => ( <Dashboard {...props} {...stuff} /> )}/> )＆amp; Dashboard但Users未呈现。如果我更改顺序并将测验放在Quiz之上，它将起作用。这意味着它只能在第一个确切的路线后呈现一个。

但相反，如果我拿走所有这些代码并在交换机中编写路由而不引用另一个组件，它就像一个魅力。

<Users />

我已尝试过两个组件，并在路线中渲染，这只是一个示例

有关为何会发生这种情况的任何建议？

更新1

我还没有弄清楚问题是什么以及导致问题的原因，但我通过创建一个返回<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>和直接Switch作为孩子的组件找到了解决方法。然后我将Routes导出到我的主应用程序。

Answer 1

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

这不起作用，因为{{3}}期望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进行渲染，并将其留给库消费者。

返回的React-Router <route>在交换机中不起作用

1 个答案: