Ich habe einige Styling-Probleme mit React-Router und React-Bootstrap. Unten ist ein Ausschnitt aus dem Code
import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
<Nav pullRight>
<NavItem eventKey={1}>
<Link to="home">Home</Link>
</NavItem>
<NavItem eventKey={2}>
<Link to="book">Book Inv</Link>
</NavItem>
<NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
<MenuItem eventKey="3.1">
<a href="" onClick={this.logout}>Logout</a>
</MenuItem>
</NavDropdown>
</Nav>
So sieht es beim Rendern aus.
Ich weiß, dass das <Link></Link>
das verursacht, aber ich weiß nicht warum? Ich möchte, dass dies in Einklang steht.
react-router
react-bootstrap
chad schmidt
quelle
quelle
Die Verwendung von LinkContainer über den React -Router-Bootstrap ist der richtige Weg. Der folgende Code sollte funktionieren.
Dies ist meistens ein Hinweis für das zukünftige Selbst, wenn Sie dieses Problem googeln. Ich hoffe, jemand anderes könnte von der Antwort profitieren.
quelle
2020 upd: getestet mit
react-boostrap: 1.0.0-beta.16
undreact-router-dom: 5.1.2
Aktualisierung 2019: Für diejenigen, die mit React -Bootstrap v4 (derzeit mit 1.0.0-beta.5) und React-Router-Dom v4 (4.3.1) arbeiten, verwenden Sie einfach "als" Prop von Nav.Link, hier ist voll Beispiel:
Hier ist ein Arbeitsbeispiel: https://codesandbox.io/s/3qm35w97kq
quelle
LinkContainer
from,react-router-bootstrap
da diese Lösung unterstütztactiveClassName
.Haben Sie versucht, React-Bootstraps zu verwenden
componentClass
?quelle
Sie können die Verwendung
LinkContainer
von React-Router-Bootstrap vermeiden . AllerdingscomponentClass
wird werdenas
in der nächsten Version. Sie können also das folgende Snippet für die letzte Version (v1.0.0-beta) verwenden:quelle
Hier ist eine Lösung für die Verwendung mit React-Router 4:
quelle
router.transitionTo(href)
verwendenrouter.history.push(href)
Sie können mit der Geschichte , nur sicher sein , um die Komponente erstellen mit Router :
in App.js:
in Navigation.js:
quelle
IndexLinkContainer ist eine bessere Option als LinkContainer, wenn das Inside NavItem basierend auf der aktuellen Auswahl hervorheben soll, welcher aktiv ist . Es wird kein manueller Auswahlhandler benötigt
quelle
IndexLinkContainer
? konnte es nirgendwo in den Dokumenten finden ...Verwenden Sie dieses Format, um Funktionen mit der Requisite "activeKey" in der Beta-Version von react-bootstrap v_1.0 hinzuzufügen:
quelle