Javascript 反应BrowserRouter，导致；您不应该使用<；路线>；或在a<；路由器>&引用；

我经常碰到这个问题，而且已经被困了很长时间了。我是新来的

mbdreact

库，我一直在尝试他们的这个例子。这给了我太多的调试和理解问题

问题：

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

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

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

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;

NavbarPage.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();

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

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;

从“React”导入React；
从“mdbreact”导入{MDBContainer、MDBNavbar、MDBNavbarrand、MDBNavbarNav、MDBNavbarToggler、MDBCollapse、MDBNavItem、MDBNavLink、MDBIcon}；
从“react Router dom”导入{BrowserRouter as Router}；
类FixedNavbarExample扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
崩溃：错，
};
this.onClick=this.onClick.bind（this）；
}
onClick（）{
这是我的国家({
崩溃：！this.state.collapse，
});
}
render（）{
const bgPink={backgroundColor:'#e91e63'}
常量容器={height:1300}
返回(
导航栏
家
特征
定价
选择权
);
}
}
导出默认固定导航示例；

我目前的发现：

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

• 我已经参考了下面的文章

• 据我所见，问题出现在

  NavbarPage.js

  中。上面的文章告诉我两件事：（第一件事）把
  教程中的示例链接已经在做的

  mdbreact

  中的所有内容包装起来&（第二件事）移入其中，也完成了

• 我还尝试将导入从

  BrowserRouter重命名为Router

  ，仅将导入重命名为

  BrowserRouter

  ，并进行了相应的重构。即使这样也会导致同样的错误

---

要了解导致此问题的原因，请寻求帮助，以进一步了解

react

，

mdbreact

，您的react路由器dom版本（beta.6）与mdbreact库不兼容。

---

如果安装稳定版本^4.3.1，一切都会正常工作。

另一个相同错误的原因是，在主要应用程序组件中，缺少BrowserRouter标记。让我举一个例子：

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

.....
.....

---

注意周围的标签。

谢谢@Rotarepmi，希望这能解决问题。我会很快试一试。非常感谢！我注意到您是github的

mdbreact

团队的一员，您可以帮助回答这些问题。您的团队是否有可能维护某种兼容性表？如果您已经有了，我肯定会错过它。如果你能给我指一下，那太好了。这是这样一张桌子：但我想它不能满足你的需要吗？：）MDBReact包不断更新，因此它与所有最新的稳定版本兼容（或至少向后兼容）。您一直在使用react router dom的测试版，这导致了问题。您可以在

dependencies

中查看所有mdbreact依赖项（及其版本）：