'Router' cannot be used as a JSX component

user_16356642 0
Viewed 11866

Error Message

'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 code

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

Router.tsx code

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"]
}

What is this error ?

Error in index.tsx <Router />

How do I resolve this issue?

react-router typescript reactjs javascript
2 Answers

I would like to comment but I dont have enough reputation, But as your error code is saying you are not return anything in the Router.tsx. Try add the return statement in the Router function like so

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

Change your Router.tsx file to

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>
      </>
    )
}
user_160798720
Related