使用 react-router-dom 在 Route 中添加一个组件作为 props

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...下出现一条红线<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

有任何想法吗？

Answer 1

在react-router-dom v5 中，您没有将component prop 指定为 JSX 文字（RRDv6 语法），只需传递对组件的引用。

component={NextComponent}而不是component={<NextComponent />}

代码

export function MyComponent({ list }: MyComponentProps) {
  return (
    <Router>
      <Switch>
        <Route path={list[0].url} component={NextComponent} />
      </Switch>
    </Router>
  );
}