ReactJSのNavLinkのプロパティ 'location'が未定義です

Question

私がしようとしているのは、ナビゲーションバーの非常に基本的な実装です。

import React, { Component } from 'react'; 
import { Route, BrowserRouter } from 'react-router-dom'; 
import './MainLayout.css'; 
import ReportNavComponent from './ReportNavComponent'; 
import NumberOfPatients from '../reports/NumberOfPatients/NumberOfPatients'; 


class MainLayout extends Component { 


    render() { 
     return (
      <div className="pageContainer"> 
       <div className="reportNavBar"> 
        <ReportNavComponent /> 
       </div> 
       <div className="reportContent"> 

        <BrowserRouter> 
         <Route path="/numberOfPatients" component={NumberOfPatients} /> 
        </BrowserRouter> 

       </div> 
      </div> 
     ); 
    } 
} 

export default MainLayout; 

以下は、私がアンカータグのいくつかの並べ替えを持っている私のナビゲーションコンポーネントです：

"dependencies": { 
    "bootstrap": "^3.3.7", 
    "jquery": "^3.2.1", 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-router": "^4.1.2", 
    "react-router-dom": "^4.1.1" 
    }, 

ここでは、私のMainLayoutコンポーネントを見ることができます。

import React, { Component } from 'react'; 
import { NavLink } from 'react-router-dom'; 
import './ReportNavMenu.css'; 


class ReportNavComponent extends Component { 


    render() { 
     return (
      <div className="container123"> 
       <div className="menuItem"> 
        <p className="contentParagraph"> 
         <i className="glyphicon glyphicon-list-alt float-left" ></i> 

         <NavLink exact activeClassName="active" to="/numberOfPatients"> 
          List of Users 
         </NavLink> 
        </p> 
       </div> 
      </div> 
     ); 
    } 
} 

export default ReportNavComponent; 

私は以下の例外を取得しています：

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. 
    in Router 
printWarning @ vendor.bundle.js:869 
warning @ vendor.bundle.js:893 
checkReactTypeSpec @ vendor.bundle.js:3037 
validatePropTypes @ vendor.bundle.js:2475 
createElement @ vendor.bundle.js:2529 
(anonymous) @ app.bundle.js:sourcemap:32 
__webpack_require__ @ vendor.bundle.js:53 
webpackJsonpCallback @ vendor.bundle.js:24 
(anonymous) @ app.bundle.js:sourcemap:1 
vendor.bundle.js:5744 Uncaught TypeError: Cannot read property 'location' of undefined 
    at new Router (vendor.bundle.js:5744) 
    at app.bundle.js:11393 
    at measureLifeCyclePerf (app.bundle.js:11174) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (app.bundle.js:11392) 
    at ReactCompositeComponentWrapper._constructComponent (app.bundle.js:11378) 
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11286) 
    at Object.mountComponent (app.bundle.js:3735) 
    at ReactCompositeComponentWrapper.performInitialMount (app.bundle.js:11469) 
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11356) 
    at Object.mountComponent (app.bundle.js:3735) 
Router @ vendor.bundle.js:5744 
(anonymous) @ app.bundle.js:11393 
measureLifeCyclePerf @ app.bundle.js:11174 
_constructComponentWithoutOwner @ app.bundle.js:11392 
_constructComponent @ app.bundle.js:11378 
mountComponent @ app.bundle.js:11286 
mountComponent @ app.bundle.js:3735 
performInitialMount @ app.bundle.js:11469 
mountComponent @ app.bundle.js:11356 
mountComponent @ app.bundle.js:3735 
mountComponentIntoNode @ app.bundle.js:16594 
perform @ app.bundle.js:4735 
batchedMountComponentIntoNode @ app.bundle.js:16616 
perform @ app.bundle.js:4735 
batchedUpdates @ app.bundle.js:14103 
batchedUpdates @ app.bundle.js:3381 
_renderNewRootComponent @ app.bundle.js:16809 
_renderSubtreeIntoContainer @ app.bundle.js:16891 
render @ app.bundle.js:16912 
(anonymous) @ app.bundle.js:32 
__webpack_require__ @ vendor.bundle.js:53 
webpackJsonpCallback @ vendor.bundle.js:24 
(anonymous) @ app.bundle.js:1 

vendor.bundle.js:5744 Uncaught TypeError: Cannot read property 'location' of undefined 
    at new Router (vendor.bundle.js:5744) 
    at app.bundle.js:11393 
    at measureLifeCyclePerf (app.bundle.js:11174) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (app.bundle.js:11392) 
    at ReactCompositeComponentWrapper._constructComponent (app.bundle.js:11378) 
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11286) 
    at Object.mountComponent (app.bundle.js:3735) 
    at ReactCompositeComponentWrapper.performInitialMount (app.bundle.js:11469) 
    at ReactCompositeComponentWrapper.mountComponent (app.bundle.js:11356) 
    at Object.mountComponent (app.bundle.js:3735) 

は非常にあなたの助けに感謝:)

更新：を私は、以下の変更を試してみましたが、うまくいきませんでした。私は同じエラーを取得：

class MainLayout extends Component { 


    render() { 
     return (
      <div className="pageContainer"> 
       <BrowserRouter> 
        <div> 
         <div className="reportNavBar"> 
          <ReportNavComponent /> 
         </div> 
         <div className="reportContent"> 
          <Route path="/numberOfPatients" component={NumberOfPatients} /> 
         </div> 
        </div> 
       </BrowserRouter> 
      </div> 
     ); 
    } 
} 

Answer 1

として

import { withRouter } from 'react-router-dom' 

およびエクスポート以下に、このコンポーネントを：

import React, { Component } from 'react'; 
import { Route, BrowserRouter } from 'react-router-dom'; 
import './MainLayout.css'; 
import ReportNavComponent from './ReportNavComponent'; 
import NumberOfPatients from '../reports/NumberOfPatients/NumberOfPatients'; 

import createBrowserHistory from 'history/createBrowserHistory'; 
const history = createBrowserHistory(); 


class MainLayout extends Component { 


    render() { 
     return(
      <div className="pageContainer"> 
       <BrowserRouter history={history}> 
        <div> 
         <div className="reportNavBar"> 
          <ReportNavComponent /> 
         </div> 
         <div className="reportContent"> 
          <Route path="/numberOfPatients" component={NumberOfPatients} /> 
         </div> 
        </div> 
       </BrowserRouter> 
      </div> 
     ) 
    } 
} 

export default MainLayout; 

Answer 2

私はReportNavComponentはそれらの小道具値を取得していない理由です、その理由は、あなたがBrowserRouter内ReportNavComponentをレンダリングしていないと思います。

はこのようにそれを書く：

return(
    <div className="pageContainer"> 
     <BrowserRouter> 
      <div> 
       <div className="reportNavBar"> 
        <ReportNavComponent /> 
       </div> 
       <div className="reportContent"> 
        <Route path="/numberOfPatients" component={NumberOfPatients} /> 
       </div> 
      </div> 
     </BrowserRouter> 
    </div> 
) 

Answer 3

私はhistoryがNavLinkコンポーネントのために必要なパラメータであるが、それは利用できないと思います。 withRouterを使用できます。あなたのReportNavComponentでwithRouterをインポートすると、次の変更を実行します。あなたは「歴史」をインポートし、BrowserRouterに追加する必要があり

export default withRouter(ReportNavComponent)