javascript — реакции-маршрутизатор: как отключить, если он активен?

Reaction-router: Как отключить {amp}lt;Link{amp}gt;, если он активен?

Компонент « Route React Router имеет три различных способа рендеринга контента на основе текущего маршрута. В то время как component чаще всего используется для отображения компонента только во время сопоставления, children компонент принимает обратный вызов ({match}) ={amp}gt; {return {amp}lt;stuff/{amp}gt;} который может визуализировать вещи, сопоставленные при сопоставлении, даже если маршруты этого не делают. совпадать

Я создал класс NavLink, который заменяет ссылку на span и добавляет класс, когда активен его маршрут.

 class NavLink extends Component { render() { var { className, activeClassName, to, exact, ...rest } = this.props; return( {amp}lt;Route path={to} exact={exact} children={({ match }) ={amp}gt; { if (match) { return {amp}lt;span className={className   " "   activeClassName}{amp}gt;{this.props.children}{amp}lt;/span{amp}gt;; } else { return {amp}lt;Link className={className} to={to} {...rest}/{amp}gt;; } }} /{amp}gt; ); } } , class NavLink extends Component { render() { var { className, activeClassName, to, exact, ...rest } = this.props; return( {amp}lt;Route path={to} exact={exact} children={({ match }) ={amp}gt; { if (match) { return {amp}lt;span className={className   " "   activeClassName}{amp}gt;{this.props.children}{amp}lt;/span{amp}gt;; } else { return {amp}lt;Link className={className} to={to} {...rest}/{amp}gt;; } }} /{amp}gt; ); } } 

Затем создайте навигационную ссылку примерно так

 {amp}lt;NavLink to="/dashboard" className="navlink" activeClassName="active"{amp}gt; 

NavLink в React Router делает что-то похожее, но это все же позволяет пользователю щелкнуть ссылку и нажать историю.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector