无法读取 ReactJS 中 NavLink 的未定义属性“位置”

Question

我正在尝试的只是导航栏的一个非常基本的实现。

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

下面是我的 Navigation 组件，我有一些锚标签。

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

您需要导入'history'并将其添加到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;

Answer 2

我认为原因是，您没有在 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>
)

Answer 3

我认为history 是NavLink 组件的必需参数，但它不可用。您可以使用withRouter。在您的ReportNavComponent 中导入withRouter 并进行以下更改：

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

及以下将此组件导出为

export default withRouter(ReportNavComponent)