使用 react-router-dom 在 Route 中添加组件作为道具

Posted 2023-02-22

【中文标题】使用 react-router-dom 在 Route 中添加组件作为道具

【英文标题】：Add a component as props inside a Route with react-router-dom

【发布时间】：2021-12-27 21:47:11

【问题描述】：

有以下代码：

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】：

在 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 道具。这有效地呈现了一个匿名的 React 组件。不要忘记，您可能还需要将 route 道具传递给渲染的组件。

export function MyComponent( list : MyComponentProps) 
  return (
    <Router>
      <Switch>
        <Route
          path=list[0].url
          render=props => <NextComponent ...props something=value /> 
        />
      </Switch>
    </Router>
  );

Route render methods

【讨论】：

它的工作原理是这样的，但是否可以为该组件发送道具？ component=<NextComponent something=value /> 之类的东西？