我正在尝试使用ReactJS创建一个简单的Webapp,我想使用NavbarReact-Bootstrap提供的。
Navbar
我创建了一个Navigation.js文件,其中包含一个类,Navigation用于将Navbar和和路由与App.js文件分开。但是,这两个部分似乎都不起作用。当我加载页面时,它只是空的,没有导航栏。谁能发现一个错误?
Navigation.js
Navigation
App.js
Navigation.js:
import React, { Component } from 'react'; import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap'; import { Switch, Route } from 'react-router-dom'; import { Home } from './Page'; class Navigation extends Component { render() { return ( <div> <div> <Navbar> <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand> <Navbar.Collapse> <Nav className="mr-auto"> <NavItem eventkey={1} href="/"> <Nav.Link href="/">Home</Nav.Link> </NavItem> </Nav> <Form inline> <FormControl type="text" placeholder="Search" className="mr-sm-2" /> <Button variant="outline-success">Search</Button> </Form> </Navbar.Collapse> </Navbar> </div> <div> <Switch> <Route exact path='/' component={Home} /> <Route render={function () { return <p>Not found</p> }} /> </Switch> </div> </div> ); } } export default Navigation;
App.js:
import React, { Component } from 'react'; import Navigation from './components/routing/Navigation'; class App extends Component { render() { return ( <div id="App"> <Navigation /> </div> ); } } export default App;
我尝试使用已经NavItem包含的LinkContainerfrom react-router-bootstrap,这导致了相同的结果。
NavItem
LinkContainer
react-router-bootstrap
为了完整性,Page.js:
import React, { Component } from 'react'; import { Link } from 'react-router-dom'; export const Page = ({ title }) => ( <div className="App"> <div className="App-header"> <h2>{title}</h2> </div> <p className="App-intro"> This is the {title} page. </p> <p> <Link to="/">Home</Link> </p> <p> <Link to="/about">About</Link> </p> <p> <Link to="/settings">Settings</Link> </p> </div> ); export const About = (props) => ( <Page title="About"/> ); export const Settings = (props) => ( <Page title="Settings"/> ); export const Home = (props) => ( <Page title="Home"/> );
首先,在您的代码片段中,似乎并没有将代码包装在中Router,因此您应确保在内部App或内部进行操作ReactDOM.render:
Router
App
ReactDOM.render
import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, rootElement );
接下来,您的特定问题是呈现的是React-Bootstrap Nav.Link的Link组件,而不是React- Router的组件,因此,路由器不会处理您的路由更改。幸运的是,react- bootstrap在其大多数组件中都提供了一个渲染道具,以指定您要渲染的组件或元素(如果您不希望使用默认组件)。切换到这样的东西:
Nav.Link
Link
import { Switch, Route, Link } from 'react-router-dom'; class Navigation extends Component { render() { return ( <div> <div> <Navbar> <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand> <Navbar.Collapse> <Nav className="mr-auto"> <NavItem eventkey={1} href="/"> <Nav.Link as={Link} to="/" >Home</Nav.Link> </NavItem> </Nav> <Form inline> <FormControl type="text" placeholder="Search" className="mr-sm-2" /> <Button variant="outline-success">Search</Button> </Form> </Navbar.Collapse> </Navbar> </div> <div> <Switch> <Route exact path='/' component={Home} /> <Route render={function () { return <p>Not found</p> }} /> </Switch> </div> </div> ); } }