reactjs - NavBar 在 Reactjs 中不工作 MDBootstrap

Question

我尝试从 MDBoostrap (mdbreact) 实现导航栏，但由于某种原因，我无法让它工作。

这就是我的 index.js 文件的样子。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {Provider} from 'react-redux';
import './index.scss';
import NavBar from './components/NavBar/NavBar';
import App from './components/App/App';
import Video from './components/Video/Video';
import createStore from './store';
import * as serviceWorker from './serviceWorker';

const store = createStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={App}/>
                <Route exact path="/images" component={App}/>
                <Route exact path="/video" component={Video}/>
            </Switch>
        </Router>
    </Provider>, document.getElementById('root'));

导航栏.jsx：

import React, {Component} from 'react';
import {
    MDBCollapse,
    MDBDropdown,
    MDBDropdownItem,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBFormInline,
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarToggler,
    MDBNavItem,
    MDBNavLink
} from 'mdbreact';
import {BrowserRouter} from 'react-router-dom';

class NavBar extends Component {
    state = {
        isOpen: false
    };

    toggleCollapse = () => {
        this.setState({isOpen: !this.state.isOpen});
    };

    render() {
        return (
            <BrowserRouter>
                <MDBNavbar color="indigo" dark expand="md">
                    <MDBNavbarBrand>
                        <strong className="white-text">Navbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse}/>
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                        <MDBNavbarNav left>
                            <MDBNavItem active>
                                <MDBNavLink to="#!">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBNavLink to="#!">Features</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBNavLink to="#!">Pricing</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBDropdown>
                                    <MDBDropdownToggle nav caret>
                                        <span className="mr-2">Dropdown</span>
                                    </MDBDropdownToggle>
                                    <MDBDropdownMenu>
                                        <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                                        <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                                    </MDBDropdownMenu>
                                </MDBDropdown>
                            </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav right>
                            <MDBNavItem>
                                <MDBFormInline waves>
                                    <div className="md-form my-0">
                                        <input className="form-control mr-sm-2" type="text" placeholder="Search"
                                               aria-label="Search"/>
                                    </div>
                                </MDBFormInline>
                            </MDBNavItem>
                        </MDBNavbarNav>
                    </MDBCollapse>
                </MDBNavbar>
            </BrowserRouter>
        );
    }
}

export default NavBar;

这是我得到的错误：

如何在全局级别访问导航栏？我收到一条错误消息"You should not use <Route> or withRouter() outside a <Router>"。

请指教。

标签： reactjsmdbootstrapmdbreact