我尝试从 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>"
。
请指教。