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

Question

有以下代码：

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} 则不行

Answer 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