Eine andere Möglichkeit besteht darin, das Klickereignis zu deaktivieren, wenn Sie bereits auf denselben Pfad klicken. Hier ist eine Lösung, die funktioniert mit React-Router v4.
import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
class SafeLink extends Component {
onClick(event){
if(this.props.to === this.props.history.location.pathname){
event.preventDefault();
}
// Ensure that if we passed another onClick method as props, it will be called too
if(this.props.onClick){
this.props.onClick();
}
}
render() {
const { children, onClick, ...other } = this.props;
return <Link onClick={this.onClick.bind(this)} {...other}>{children}</Link>
}
}
export default withRouter(SafeLink);
Sie können Ihren Link dann als (alle zusätzlichen Requisiten von Link
würde funktionieren):
<SafeLink className="some_class" to="/some_route">Link text</SafeLink>
Alle die Güte von Router NavLink reagieren mit dem deaktivieren Fähigkeit.
import React from "react"; // v16.3.2
import { withRouter, NavLink } from "react-router-dom"; // v4.2.2
export const Link = withRouter(function Link(props) {
const { children, history, to, staticContext, ...rest } = props;
return <>
{history.location.pathname === to ?
<span>{children}</span>
:
<NavLink {...{to, ...rest}}>{children}</NavLink>
}
</>
});
const [isActive, setIsActive] = useState(true);
<Link to={isActive ? '/link-to-route' : null} />
Sie können dies versuchen, das hat bei mir funktioniert.
Routers reagieren Route
Komponente hat drei verschiedene Wege zum Rendern von Inhalten basierend auf der aktuellen Route. Während component
wird am häufigsten verwendet, um eine Komponente nur während eines Spiels zu zeigen, die children
Komponente nimmt ein ({match}) => {return <stuff/>}
Rückruf, der Dinge bei Übereinstimmung rendern kann auch wenn die Routen nicht übereinstimmen.
Ich habe eine NavLink-Klasse erstellt, die einen Link durch eine Spanne ersetzt und eine Klasse hinzufügt, wenn dies der Fall ist to
Strecke ist aktiv.
class NavLink extends Component {
render() {
var { className, activeClassName, to, exact, ...rest } = this.props;
return(
<Route
path={to}
exact={exact}
children={({ match }) => {
if (match) {
return <span className={className + " " + activeClassName}>{this.props.children}</span>;
} else {
return <Link className={className} to={to} {...rest}/>;
}
}}
/>
);
}
}
Erstellen Sie dann so einen Navlink
<NavLink to="/dashboard" className="navlink" activeClassName="active">
NavLink des Routers reagieren macht etwas Ähnliches, aber das erlaubt dem Benutzer immer noch, auf den Link zu klicken und den Verlauf zu pushen.
stackoverflow.com/a/10276157/1642219
– Udit Bhardwaj
12. März 2016 um 22:10 Uhr
@UDB-Rendering a
<span>
Anstatt von<a>
ist völlig in Ordnung. Diese Frage war spezifisch für den React-Router – keine allgemeine Frage. Aber danke.– Pipo
13. März 2016 um 19:08 Uhr