How to set history correctly?

Question

JavaScript

import createBrowserHistory from 'history/createBrowserHistory';

import App from './App';

export const history = createBrowserHistory();

ReactDOM.render(
    <Router history={history}>
            <App />
    </Router>,
        
 document.getElementById('root'));

Prints
Cannot read property 'location' of undefined

44 |
45 | _this = _React$Component.call(this, props) || this;
46 | _this.state = {
> 47 | location: props.history.location
| ^48 | }; // This is a bit of a hack. We have to start listening for location
49 | // changes here in the constructor in case there are any s
50 | // on the initial render. If there are, they will replace/push when

Answer 1

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

or:

import React from 'react';
import { render } from 'react-dom';
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
import App from './App';

const history = createBrowserHistory();

render(
  <Router history={history}>
    <App />
  </Router>,     
  document.getElementById('root'),
);

Documentation