'React Router Dom prevents whole App from rendering

For some reason when I call the BrowserRouter inside my App() function, the whole App is prevented from being rendered. If I comment out the lines, the App works. I am a complete new to React. Is there something I am doing wrong?

index.js

import ReactDOM from 'react-dom';
import App from './App'

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

App.js

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
    return (
        <div>
            <h1>:S</h1>
            <BrowserRouter>
                <h1>:)</h1>
            </BrowserRouter>
            <h1>:(</h1>
        </div>
    );
}
export default App;

I thought that even if there was something wrong with BrowserRouter at least the first h1 tag would render, but no. The whole function just disappears and the page is blank.

What should I do?

EDIT: Browser console throws this error

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:44878:17)
    at useRef (bundle.js:44918:24)
    at BrowserRouter (bundle.js:42102:65)
    at renderWithHooks (bundle.js:22138:22)
    at mountIndeterminateComponent (bundle.js:24900:17)
    at beginWork (bundle.js:26099:20)
    at HTMLUnknownElement.callCallback (bundle.js:11088:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11137:20)
    at invokeGuardedCallback (bundle.js:11197:35)
    at beginWork$1 (bundle.js:30939:11)
react-dom.development.js:20085 The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:42098:5)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:44878:17)
    at useRef (bundle.js:44918:24)
    at BrowserRouter (bundle.js:42102:65)
    at renderWithHooks (bundle.js:22138:22)
    at mountIndeterminateComponent (bundle.js:24900:17)
    at beginWork (bundle.js:26099:20)
    at HTMLUnknownElement.callCallback (bundle.js:11088:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11137:20)
    at invokeGuardedCallback (bundle.js:11197:35)
    at beginWork$1 (bundle.js:30939:11)

Solution 1:^[1]

I had wrongly installed react-router-dom in the parent directory of the project (which hosts the server) instead of the client subfolder (where react lives).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nicolás Fernández Fioretti

'React Router Dom prevents whole App from rendering

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]