React Router выдает непонятную ошибку?

Question

[Денис]

Помогите разобраться, начал изучать react и при создании простых роутов натолкнулся на ошибку:
Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
in Router
, а также еще одну:
Uncaught TypeError: Cannot read property 'location' of undefined
Вот код:

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')
);

Читал в инете, мол react-router версии выше 4 работает немного по другим правилам, и что уже надо импортировать BrowserRouter из react-router-dom, но BrowserRouter принимает только один узел, а я хочу сразу два узла(роута) указать. Как привел в примере выше. Как решить эту проблему?

Comments

[Johniq]

короче, ошибка в том что вы не передали history в router родительский, и вот тут всё что нужно знать по роутеру https://reacttraining.com/react-router/

Answer 1

[tonyshow]

Все верно, используйте BrowserRouter из react-route-dom, а для переключения между Route используйте 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')
);