javascript - react BrowserRouter 导致 "You should not use or withRouter() outside a "

Question

我经常遇到这个问题，现在已经坚持了很长时间。我是 mbdreact 的新手图书馆，我一直在尝试他们的这个例子 link .这给我带来了太多调试和理解正在发生的事情的问题。

问题:

You should not use <Route> or withRouter() outside a <Router>

我可以提取的详细错误跟踪如下:

Uncaught Error: You should not use <Route> or withRouter() outside a <Router>
    at invariant (browser.js:34)
    at Route.computeMatch (Route.js:96)
    at new Route (Route.js:72)
    at constructClassInstance (react-dom.development.js:13082)
    at updateClassComponent (react-dom.development.js:14978)
    at beginWork (react-dom.development.js:15845)
    at performUnitOfWork (react-dom.development.js:18879)
    at workLoop (react-dom.development.js:18920)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18127)
    at renderRoot (react-dom.development.js:19038)
    at performWorkOnRoot (react-dom.development.js:19941)
    at performWork (react-dom.development.js:19851)
    at performSyncWork (react-dom.development.js:19825)
    at requestWork (react-dom.development.js:19680)
    at scheduleWork (react-dom.development.js:19487)
    at scheduleRootUpdate (react-dom.development.js:20191)
    at updateContainerAtExpirationTime (react-dom.development.js:20217)
    at updateContainer (react-dom.development.js:20285)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20564)
    at react-dom.development.js:20718
    at unbatchedUpdates (react-dom.development.js:20068)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:20714)
    at Object.render (react-dom.development.js:20781)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (index.js:15)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

代码:

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.7.1",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "contentful": "^7.0.5",
    "jquery": "^3.3.1",
    "mdbreact": "^4.8.6",
    "prop-types": "^15.6.2",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-router-dom": "^4.4.0-beta.6",
    "react-scripts": "2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
//import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
//serviceWorker.unregister();

App.js

import React from 'react'
import { MDBContainer } from 'mdbreact';

import FixedNavbarExample from './components/navbar/NavbarPage'



const App = () => {

    return (
        <div>
            <FixedNavbarExample/>
            <MDBContainer style={{height: 100}} className="text-center mt-5 pt-5">
            </MDBContainer>
        </div>
    )
}

export default App

NavbarPage.js

import React from 'react';
import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class FixedNavbarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false,
        };
        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        this.setState({
            collapse: !this.state.collapse,
        });
    }

    render() {
        const bgPink = {backgroundColor: '#e91e63'}
        const container = {height: 1300}
        return(
            <div>
                <Router>
                    <header>
                        <MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
                            <MDBNavbarBrand href="/">
                                <strong>Navbar</strong>
                            </MDBNavbarBrand>
                            <MDBNavbarToggler onClick={ this.onClick } />
                            <MDBCollapse isOpen = { this.state.collapse } navbar>
                                <MDBNavbarNav left>
                                    <MDBNavItem active>
                                        <MDBNavLink to="#">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="#">Features</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="#">Pricing</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="#">Options</MDBNavLink>
                                    </MDBNavItem>
                                </MDBNavbarNav>
                                <MDBNavbarNav right>
                                    <MDBNavItem>
                                        <MDBNavLink to="#"><MDBIcon icon="facebook" /></MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="#"><MDBIcon icon="twitter" /></MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="#"><MDBIcon icon="instagram" /></MDBNavLink>
                                    </MDBNavItem>
                                </MDBNavbarNav>
                            </MDBCollapse>
                        </MDBNavbar>
                    </header>
                </Router>
            </div>
        );
    }
}

export default FixedNavbarExample;

到目前为止我发现了什么:

• 我引用了以下 StackOverflow 帖子

  • link1

  • link2

• 据我所知，问题出在 NavbarPage.js 中.上面的文章告诉我两件事:(第一件事)将所有内容包装在 <div> 中示例链接来自 mdbreact教程已经在做 & (Second-Thing) 移动到里面，这也完成了。

• 我还尝试重命名来自 BrowserRouter as Router 的导入只是BrowserRouter , 并做了相应的重构。即使这样也会导致同样的错误。

寻求帮助以了解导致此问题的原因，以进一步了解 react , mdbreact .

Answer 1

您的 react-router-dom 版本 (beta.6) 与 mdbreact 库不兼容。如果你安装稳定版本 ^4.3.1 一切都会正常。