CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Leon Gaban
Leon Gaban

Reputation: 39018

warning.js:36 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

Getting the error in the title based on the following code:

import React from 'react'
// import { browserHistory, hashHistory, Router } from 'react-router'
// import createMemoryHistory from 'history/lib/createMemoryHistory'
import { browserHistory, hashHistory, Router, Route, Switch } from 'react-router-dom'
import Portfolio from './portfolio/Portfolio'
import Home from './home/Home'
import NoMatch from './NoMatch'

// const history = createMemoryHistory(location);
// console.log('history', history);

const Routes = () => {
    return (
        <Router history={browserHistory}>
            <Route exact={ true } path="/" component={ Home }/>
            <Route exact={ true } path="/portfolio" component={ Portfolio }/>
            <Route component={ NoMatch } />
        </Router>
    );
}

export default Routes

enter image description here

Upvotes: 0

Views: 602

Answers (1)

Upasana
Upasana

Reputation: 1975

Replace Router with BrowserRouter and use Switch as from react-router-dom version4.0, Router can not have more than one child.

import { browserHistory, hashHistory, BrowserRouter, Route, Switch } from 'react-router-dom';

and replace routes with below code:

const Routes = () => {
        return (
            <BrowserRouter history={browserHistory}>
             <Switch>
                <Route exact={ true } path="/" component={ Home }/>
                <Route exact={ true } path="/portfolio" 
                       component={ Portfolio }/>
                <Route component={ NoMatch } />
             </Switch>
            </BrowserRouter>
        );
    }

Upvotes: 3

Related Questions