無法讀取ReactJS中NavLink未定義的屬性「位置」

所有我在嘗試的是導航欄的非常基本的實現。無法讀取ReactJS中NavLink未定義的屬性「位置」

"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 { 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;

下面是我導航成分，我有某種錨標籤。

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

來源

2017-07-18 Jude Niroshan

您需要導入的歷史「，並把它添加到BrowserRouter：

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;

來源

2017-07-18 07:28:58 Amy

我想原因是，你是不是渲染內BrowserRouter ReportNavComponent，這就是爲什麼ReportNavComponent沒有得到那些道具值。

寫這樣的：

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

來源

2017-07-18 03:08:06

謝謝你的回答，我試過了，但它沒有工作，雖然 –

與此相同的錯誤？ –

可惜是的，它是:( –

我覺得history需要參數NavLink組件，但它是不可用的。您可以使用withRouter。導入withRouter在ReportNavComponent並做以下修改：

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

及以下的出口，這個組件

export default withRouter(ReportNavComponent)

來源

2017-07-18 03:55:36

AFAIK，'react-router'已被棄用，現在幾乎每一篇文章都告訴我使用'react-router-dom' –

錯誤地抱歉替換import語句爲 'import { withRouter} from'react-router-dom'' 'withRouter'也可用於'react-router-dom' –

無法讀取ReactJS中NavLink未定義的屬性「位置」

回答

相關問題