反应 BrowserRouter 导致 "You should not use <Route> or withRouter() outside a <Router>"

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;

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

我参考了以下 Whosebug 帖子
- link1
- link2
据我所见，问题出在 NavbarPage.js。上面的文章告诉我两件事：（第一件事）将所有内容包装在 <div> 中，mdbreact 教程中的示例 link 已经在做 & （第二件事）到移动到里面也完成了。
我还尝试将导入从 BrowserRouter as Router 重命名为 BrowserRouter，并进行了相应的重构。即使这样也会导致同样的错误。

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

Answer 1

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

Answer 2

同样错误的另一种情况是由于在主要应用程序组件中缺少 BrowserRouter 标记。让我举个例子：

<ApolloProvider>
  <BrowserRouter>
      .....
      <Route path="/register" component={Register} />
      .....
  </BrowserRouter>
</ApolloProvider>

注意周围的标记。

反应 BrowserRouter 导致 "You should not use <Route> or withRouter() outside a <Router>"

react BrowserRouter resulting in "You should not use <Route> or withRouter() outside a <Router>"

javascript

reactjs

react-router

mdbootstrap

mdbreact