具有以下代碼：
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}消除錯誤訊息。這是真的，但在這種情況下是否可以將道具發送到該組件？
例如，forcomponent={<NextComponent someProps={something} />} 似乎可能但不是 forcomponent={NextComponent}
uj5u.com熱心網友回復：
在react-router-domv5 中，您沒有將componentprop指定為 JSX 文字（RRDv6 語法），只需傳遞對組件的參考。
component={NextComponent} 代替 component={<NextComponent />}
代碼
export function MyComponent({ list }: MyComponentProps) {
return (
<Router>
<Switch>
<Route path={list[0].url} component={NextComponent} />
</Switch>
</Router>
);
}
如果您需要傳遞額外的道具，那么您必須使用render道具。這有效地呈現了一個匿名 React 組件。不要忘記，您可能還需要將路由道具傳遞給渲染的組件。
export function MyComponent({ list }: MyComponentProps) {
return (
<Router>
<Switch>
<Route
path={list[0].url}
render={props => <NextComponent {...props} something={value} />}
/>
</Switch>
</Router>
);
}
路由渲染方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357922.html
標籤：javascript 反应 打字稿 反应路由器 反应路由器-dom