logo
down
shadow

React router Link; activeClassName not working


React router Link; activeClassName not working

Content Index :

React router Link; activeClassName not working
Tag : javascript , By : Zinovate
Date : November 28 2020, 11:01 PM

I think the issue was by ths following , I didn't want to upgrade just yet as it was causing more issues than it resolved. And I wasn't using Redux so the whole connect thing didn't apply. I tried render both pure and unpure (using the pure-render decorator) with no result.
So I decided to write the link handling manually. It's super verbose I know but it works!
static contextTypes = {
   router: React.PropTypes.object
};
return (
   <li key={`nav-${el.title}`} className={`${isActiveClass}`}>
     <a onClick={this.state.LinkClick} data-item={urlkey}>{el.title}</a>
   </li>
);
LinkClick(e){
   e.preventDefault();
   const elem = e.currentTarget;
   const item = elem.dataset.item;
   this.context.router.push('/c/'+item);
   this.setState({
     activeLink: item
   });
 }
  const activeLink = this.state.activeLink;
  let isActiveClass = '';
  let navLinks = map(availableCategories, (el, index) => {
  const urlkey = el.urlkey;

  // Check the active item on page render
  const isActive = this.context.router.isActive('/c/' + urlkey);

  if(activeLink === urlkey || isActive){
    isActiveClass = s.active;
  } else {
    isActiveClass = '';
  }

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tag : javascript , By : somebody
Date : March 29 2020, 07:55 AM

Tag : reactjs , By : TBG
Date : March 29 2020, 07:55 AM
around this issue Since you have used to render home component.
You should use IndexLink to provide link for Home page
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>

React-router activeClassName not working as expected


Tag : javascript , By : Anna
Date : March 29 2020, 07:55 AM
may help you . OK, seem to have resolved it - not sure if this is a proper solution or just a workaround, but it seems to have done the trick.
The answer lies in the component. By giving it a prop of path and linking this to the changing URL, it rerenders the component each time the URL changes. Also by removing as suggested by oklas and changing it to , it prevents the active class from sticking on the link.
<div className={styles.container}>
    <SideMenu path={this.props.children.props.route.path} /> { //This 'path' property solves the problem by rerendering the SideMenu component every time the path changes }
    <ViewPort>
        {this.props.children}
    </ViewPort>
</div>

React router v4 - activeStyle and activeClassName not working


Tag : javascript , By : Search Classroom
Date : March 29 2020, 07:55 AM
With these it helps For some reason, my activeStyle and activeClassName props for NavLink component are not working. Am I doing something wrong here? Maybe I am using v3 syntax? , I believe the only problem is missing slashes, meaning:
<NavLink activeStyle={{ color:'red' }} to="/archives"> Archives </NavLink>    

<NavLink activeClassName="active" to="/settings"> Settings </NavLink>

Tag : reactjs , By : chad
Date : March 29 2020, 07:55 AM
hope this fix your issue I'm using react-router-dom. In my code, NavLink fails to apply activeStyle or activeClassName not even on page load/reload. I've nested routes but not using redux. , Try putting a slash before the to property.
Changing hello.js to:
render() {
    return (
      <div>
        <h5>
          <NavLink
            to="/child-a"
            activeStyle={{ color:'red' }}
            exact
          >child-a</NavLink>
        </h5>
        <h5>
          <NavLink
            to="/child-b"
            activeStyle={{ color:'red' }}
            exact
          >child-b</NavLink>
        </h5>
        <div>
          <div><h2>Hello</h2></div>
          {this.props.children}
        </div>
      </div>
    );
  }
Related Posts Related QUESTIONS :
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com