React-router <link />没有活动类

时间:2016-02-02 21:59:30

标签: react-router

我希望我的<Link>在匹配路线时拥有active课程。目前生成的<a>代码无法更改,即使我在链接引用的路线上也是如此。

我的链接创建如下:<Link to="/status">STATUS</Link>

路线:

  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={Status} />
      <Route path='about' component={About}/>
      <Route path='status' component={Status}/>
      <Route path='settings' component={Settings}/>
    </Route>
  </Router>

这个功能是否存在?如果是这样,我需要改变它才能发挥作用。

PS:我正在使用react-router和redux-router。我还使用默认的HashHistory,因为它是nwjs - app

2 个答案:

答案 0 :(得分:4)

使用#include <stdlib.h> typedef struct Two Two; struct Two{ int b[2]; }; int main(){ int size = 100; Two* two = malloc(sizeof(Two)*size); return 0; } 属性指定链接处于活动状态时要添加的类。

activeClassName

答案 1 :(得分:2)

我遇到与add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25); function isa_woocommerce_all_pa(){ global $product; $attributes = $product->get_attributes(); if ( ! $attributes ) return; $out = '<ul class="custom-attributes">'; foreach ( $attributes as $attribute ) { if ( $attribute->get_variation() ) continue; // skip variations if ( $attribute->is_taxonomy() ) { $taxonomy = $attribute->get_name(); $taxo_obj = $attribute->get_taxonomy_object(); $name = $taxo_obj->attribute_name; // <== Corrected $label = $taxo_obj->attribute_label; // <== Corrected $out .= '<li class="' . esc_attr( $taxonomy ) . '">'; ## ATTRIBUTE IMAGE ## // For a child theme use get_stylesheet_directory_uri() instead. $out .= '<img class="attribute-image" src="'.get_template_directory_uri().'/images/attributes/'.$name.'.jpg" alt="Attribute '.$label.'"/> '; $out .= '<span class="attribute-values">'; $terms = wp_get_post_terms( $product->get_id(), $taxonomy, array('fields' => 'names') ); foreach ( $terms as $term_name ) $term_names['name'] = $term_name; $out .= implode(', ', $term_names); $out .= '</span></li>'; } else { $value_string = implode( ', ', $attribute->get_options() ); $out .= '<li class="' . sanitize_title($taxonomy) . ' ' . sanitize_title( $value_string ) . '">'; $out .= '<span class="attribute-label">' . $taxonomy . ': </span> '; $out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>'; } } $out .= '</ul>'; echo $out; } 版本4.2.2类似的问题。  我可以使用包含react-router-dom道具的NavLink组件,而不是Link组件。

来自文件:

  

NavLink :当渲染元素与当前网址匹配时,会为渲染元素添加样式属性的特殊版本。

以下是代码示例

activeClassName

注意:<ul className="menu col-sm-12"> <li><NavLink to={`/events`} activeClassName="current">Events</NavLink></li> </ul> 已从React Router v4(relevant answer)中的activeClassName组件中删除。