React Router giving weird error?

Question

React

Help me understand, I started learning react and when creating simple routes I came across an error:
Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
in Router
, as well as another one:
Uncaught TypeError: Cannot read property 'location' of undefined
Here is the code:

import React from 'react';
import ReactDom from 'react-dom';
import {Router, Route} from 'react-router';
import NewComponent from './new-component-1';
import About from './about';


ReactDom.render(
    <Router>
        <Route path={'/'} component={ App } />
        <Route path={'about'} component={ About } />
    </Router>,
    document.getElementById('app')
);

I read on the internet that react-router version above 4 works a little according to different rules, and that you already need to import BrowserRouter from react-router-dom, but BrowserRouter accepts only one node, and I want to specify two nodes (routes) at once. As given in the example above. How to solve this problem?

Answer 1

That's right, use the BrowserRouter from react-route-dom and switch between Routes using Switch

import React from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import NewComponent from './new-component-1';
import About from './about';


ReactDom.render(
    <BrowserRouter>
        <Switch>
            <Route path={'/'} component={ App } />
            <Route path={'about'} component={ About } />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);