[英]Returned React-Router <Route> doesn't work in switch
I wrote my application in a very modular way in the way that each package (section of the application) is a package and the only thing i'm returning from each package is a <Route to="/dest" component="something" />
. 我以一种非常模块化的方式编写了我的应用程序,每个包(应用程序的一部分)都是一个包,我从每个包中返回的唯一东西是
<Route to="/dest" component="something" />
。
The problem that i'm having right now is that, this method of returning are not really working in and that's how i tested it: 我现在遇到的问题是,这种返回方法并没有真正起作用,这就是我测试它的方式:
The initial setup was something like this : 初始设置是这样的:
<Switch>
<Dashboard {...rest} />
<Users {...rest} />
<Quiz {...rest} />
</Switch>
And the Dashboard component is something like this : 仪表板组件是这样的:
...
return (
<Route exact path="/" render={ props => (
<Dashboard {...props} {...stuff} />
)}/>
)
and almost the same thing for User and Quiz components, which are directly being imported from their module packages. 用户和测验组件几乎相同,它们直接从模块包导入。
when i run the application, i can access Dashboard
& Users
but Quiz
is not being rendered. 当我运行应用程序时,我可以访问
Dashboard
和Users
但没有渲染Quiz
。 if i change the order and put quiz on top of <Users />
it will work. 如果我更改订单并将测验放在
<Users />
之上,它将起作用。 which means it only can render one after first exact route. 这意味着它只能在第一个确切路线后渲染一个。
but instead, if i take all those code and write the Routes in the switch itself without referencing to another component, it works like a charm. 但相反,如果我拿走所有这些代码并在交换机中编写路由而不引用另一个组件,它就像一个魅力。
<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
我已经尝试了两个组件,并在路线渲染,这只是一个样本
any suggestion on why is this happening ? 关于为什么会发生这种情况的任何建议?
UPDATE 1 更新1
I haven't managed to figure out what the problem is and what's causing it, but i found a way around it by creating a component that returns a Switch
and direct Routes
as children. 我还没有弄清楚问题是什么以及导致它的原因,但我通过创建一个返回
Switch
并将Routes
作为子项的组件来找到解决方法。 then i exported the Switch
to my main app. 然后我将
Switch
导出到我的主应用程序。
<Switch>
<Dashboard {...rest} />
<Users {...rest} />
<Quiz {...rest} />
</Switch>
This will not work because Switch expects Route
s to be direct children. 这不起作用,因为Switch期望
Route
s成为直接子节点。 It cannot perform its logic on arbitrary wrapper components. 它无法在任意包装器组件上执行其逻辑。
I not sure if that would work but you would have to directly export Route from the module: 我不确定这是否可行,但您必须直接从模块导出Route:
Dashboard.js Dashboard.js
export default (
<Route exact path="/" render={ props => (
<Dashboard {...props} />
)}/>
)
but when you do something like this: 但是当你做这样的事情时:
export default (stuff) => (
<Route exact path="/" render={ props => (
<Dashboard {...props} {...stuff} />
)}/>
)
Notice that you are not exporting a Route
but a functional component that renders Route. 请注意,您不是导出
Route
而是导出呈现Route的功能组件。
I personally think that you should only export purely components to be rendered without Route
s and leave that up to library consumer. 我个人认为你应该只导出纯粹的组件,而不是在没有
Route
的情况下进行渲染,并将其留给库消费者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.