javascript ReactJS Bootstrap Navbar 和 Routing 不能一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54843302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS Bootstrap Navbar and Routing not working together
提问by NotAName
I am trying to create a simple Webapp using ReactJS, and I wanted to use the Navbarprovided by React-Bootstrap.
我正在尝试使用 ReactJS 创建一个简单的 Web 应用程序，并且我想使用NavbarReact-Bootstrap 提供的。
I created a Navigation.jsfile containing a class Navigationto separate the Navbarand the Routing from the App.jsfile. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?
我创建了一个Navigation.js包含类的文件，Navigation以将Navbar和 路由与App.js文件分开。但是，这两个部分似乎都不起作用。当我加载页面时，它只是空的，没有导航栏。任何人都可以发现错误吗？
Navigation.js:
导航.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:
应用程序.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;
I tried using a NavItemcontaining a LinkContainerfrom react-router-bootstrapalready, which led to the same result.
我试图用一个NavItem包含LinkContainer从react-router-bootstrap已经，这导致了同样的结果。
Just for completeness, Page.js:
只是为了完整性，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"/>
);
回答by SrThompson
First of all, in your snippets it doesn't seem like you're wrapping your code in a Router, so you should make sure that you're doing that inside Appor in ReactDOM.render:
首先，在您的代码段中，您似乎没有将代码包装在 a 中Router，因此您应该确保在内部App或在 中执行此操作ReactDOM.render：
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
Next, your specific problem is that you're rendering react-bootstrap's Nav.Linkinstead of react-router's Linkcomponent, so the router is not picking up your route changes. Fortunately, react-bootstrap provides a render prop in most of its components to specify which component or element you want to render if you don't want the default. Switch to something like this:
接下来，您的具体问题是您正在渲染 react-bootstrapNav.Link而不是 react-router 的Link组件，因此路由器没有接收您的路由更改。幸运的是，react-bootstrap 在它的大部分组件中都提供了一个渲染属性来指定如果你不想要默认的组件或元素，你想要渲染哪个组件或元素。切换到这样的事情：
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>
);
}
}
回答by Deda
If anyone has a problem with styling Linkcomponent from react-router-domin react-bootstrap navbar, simply add className="nav-link", like this:
如果有人对 react-bootstrap 导航栏中的样式Link组件有react-router-dom疑问，只需添加className="nav-link"，如下所示：
<Link to="/" className="nav-link">Home</Link>
<Link to="/" className="nav-link">Home</Link>
as replacement for
作为替代
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/">Home</Nav.Link>
回答by Preeti Maurya
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
and Navbar.js:
和 Navbar.js：
import React from 'react';
import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';
import {Link} from 'react-router-dom';
<Nav className="ml-auto">
<NavItem> <Link className="nav-link" to="/">Home</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/about">About</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/contact">Contact</Link> </NavItem>
</Nav>
This resolved the: <Link>outside a <Router>error for me.
这解决了：<Link>在<Router>我之外的错误。
回答by Noman Hassan
i think you forgot to include bootstrap css, refer to the stylesheets section of the following doc
我想你忘了包含 bootstrap css，请参阅以下文档的样式表部分
https://react-bootstrap.github.io/getting-started/introduction/
https://react-bootstrap.github.io/getting-started/introduction/
or just add the following to ur index.html
或者只是将以下内容添加到您的 index.html
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
