在具有反应性路由器的路由中添加一个组件作为道具
在具有反应性路由器的路由中添加一个组件作为道具
提问于 2021-11-16 20:15:25
具有以下代码：
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
export function MyComponent({ list }: MyComponentProps) {
return (
<Router>
<Switch>
<Route path={list[0].url} component={<NextComponent />} />
</Switch>
</Router>
);
}我想在那条路线上装载一个不同的组件。
react-router-dom的版本是5.2.0。
此代码不起作用，它在<Route path...下出现了一条红线，说明如下：
Operator '<' cannot be applied to types 'number' and 'typeof Route'.ts(2365)
(alias) class Route<T extends {} = {}, Path extends string = string>
import Route有什么想法吗？
稍后编辑：
有一个答案指出，用component={NextComponent}替换该行将消除错误消息。这是真的，但在这种情况下，是否有可能将道具发送到该组件？
例如，对于component={<NextComponent someProps={something} />}来说似乎是可能的，但对于component={NextComponent}则不可能。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-16 20:29:04
在react-router-dom v5中，您不将component支柱指定为JSX文字( RRDv6语法)，只需传递对组件的引用即可。
component={NextComponent}而不是component={<NextComponent />}
代码
export function MyComponent({ list }: MyComponentProps) {
return (
<Router>
<Switch>
<Route path={list[0].url} component={NextComponent} />
</Switch>
</Router>
);
}如果您需要传递额外的道具，那么您必须使用render道具。这有效地呈现了匿名反应组件。不要忘记，您可能还需要将路由道具传递给呈现的组件。
export function MyComponent({ list }: MyComponentProps) {
return (
<Router>
<Switch>
<Route
path={list[0].url}
render={props => <NextComponent {...props} something={value} />}
/>
</Switch>
</Router>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69995534
复制相关文章
相似问题
腾讯云开发者
