'Router' 不能用作 JSX 组件答案

【问题标题】：'Router' cannot be used as a JSX component'Router' 不能用作 JSX 组件
【发布时间】：2021-09-13 09:57:44
【问题描述】：

错误信息

'Router' cannot be used as a JSX component.
  Its return type 'void' is not a valid JSX element.  TS2786

 import App from './App';
    5 | 
  > 6 | ReactDOM.render(<Router />, document.getElementById('root'));

index.tsx 代码

ReactDOM.render(<Router />, document.getElementById('root'));

Router.tsx 代码

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from './App';

export default function Routes() {
  <>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
      </Switch>
    </BrowserRouter>
  </>;
}

tsconfig

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    
  },
  "include": ["src"]
}

这是什么错误？

index.tsx 中的错误<Router />

我该如何解决这个问题？

【问题讨论】：

你没有从你的组件返回任何东西。
如果您只有一条路线，为什么还要使用react-router？只需让 App 成为您的源组件。

标签： javascript reactjs typescript react-router

【解决方案1】：

我想发表评论，但我没有足够的声誉，但是正如您的错误代码所说，您没有在Router.tsx 中返回任何内容。尝试像这样在Router函数中添加return语句

export default function Routes() {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </BrowserRouter>
    </>
  );
}

【讨论】：

【解决方案2】：

将您的 Router.tsx 文件更改为

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from './App';

export default function Routes() {
    return (
      <>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </BrowserRouter>
      </>
    )
}

【讨论】：