失敗道具類型：道具`歷史`在路由器中被標記爲必需，但其值爲'未定義'

Question

失敗道具類型：道具history標記爲Router中的要求，但其值爲undefined。 in Router ---------------------------------------------- ---- ///// 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') 
); 


#routes.js # 

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


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

    </Route> 
);` 

Answer 1

這是正確link反應路由器-終極版V4例子。您必須使用react-router-redux中的ConnectedRouter並通過history。我基於這個例子昨天配置了我的項目，它工作正常。

Answer 2

在React路由器v4中，您的配置應該如下所示。

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> 

自上一個版本以來API已被更改。另請注意，訂單很重要。將最具體的路徑保留在頂部。

Answer 3

修正code.You可以從這裏

https://gist.github.com/mresulakyuz/6e7e3c779044449dade2cd4055aeb0f8

Answer 4

看在我的項目，我得到兩個步驟擺脫這種類型的錯誤：

1. 一步來。進口createBrowserHistory來自'history/createBrowserHistory';並聲明const customHistory = createBrowserHistory（）;像這樣：

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

2. 看起來，這是必要的歷史屬性添加到路由器：

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