Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

2
votes

Failed prop type: The prop history is marked as required in Router, but its value is undefined.

Index.js

import {render} from 'react-dom';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import Sstore from './store/configureStore.js';
import routes from './routes';
import {loadMovies} from './actions/movieActions.js';

const store = Sstore;

store.dispatch(loadMovies());

render(  
      <Provider store={store}>

        <Router history={browserHistory} routes={routes} />
      </Provider>,
      document.getElementById('app')
);

Route.js

import React from 'react';  
import { Route, IndexRoute } from 'react-router';  
import Home from './components/Home.js';  

export default (  
      <Route path="/" component={Home}>

      </Route>
);
3
reactjsreact-router
Your code is using the api from react-router 2/3. look here for the v4 docs reacttraining.com/react-router/web/example/basic - azium
you will find your answer here stackoverflow.com/questions/43008036/… - abdul
@abdul I want to use with store - Mehmet Resul Akyuz

3 Answers

0
votes

This is the correct link to react-router-redux v4 example. You have to use ConnectedRouter from react-router-redux and pass history. I configured my project yesterday based on this example and it works fine.

0
votes

In React router v4, your configuration should be something like below.

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

 <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/api/:id" component={ComponentOne} />
            <Route path="/" component={Home} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

The API has been changed since the previous version. Also note that the order matters. Keep the most specific paths at the top.

0
votes

In my project, I get rid of this type of error in two steps:

  1. step in to import import createBrowserHistory from 'history/createBrowserHistory'; and declaring const customHistory = createBrowserHistory(); like this:

    import  { BrowserRouter as StaticRouter, Router, Switch, Route, Link } from 'react-router-dom';
import  createBrowserHistory from 'history/createBrowserHistory';
const   customHistory = createBrowserHistory();

  2. It looks like that it is necessary to add history attribute to the Router:

    <Router history={customHistory}>
<div>
    <Link to={'/.../' + linkName1}>
        {itemName1}
    </Link>
    <Link to={'/.../' + linkName2}>
        {itemName2}
    </Link>
</div>