javascriptreactjstypescript

React error: browserRouter cannot be used as a JSX component

I am getting this error React error: browserRouter cannot be used as a JSX component. when trying to run something like the following:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import BrowserRouter from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);
Solution

  • By wrapping the BrowserRouter import in curly brackets the error went away:

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);