So, I have a react ponent for a main menu.

Its a list of react-router <Link/> which point to different pages. Each link checks the window.location.path to figure out if it is the active page so that the active menu item can render differently.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/core/List";

class MainMenu extends Component {
  render() {
    return (
      <List>
        <Link to="/products" className={window.location.pathname === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={window.location.pathname === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }
}

This was actually working fine, however I now want to connect this menu ponent to my redux store so that I can display some data from the store inside the menu, as soon as I add the connect function the menu breaks such that when changing pages the "active" class doesn't get applied. i.e. the ponent does not update even though window.location.pathname has changed.

I haven't included my store code because I've tested it with dummy reducers that do nothing and also I haven't even used the data anywhere in the ponent yet.

export default connect(state => ({ foo: state.bar }))(MainMenu);

I'm still not sure whether this issue is to do with connect or if connect has just highlighted a problem with using window.location.pathname and react doesn't know when to update.

Any help is greatly appreciated!

So, I have a react ponent for a main menu.

Its a list of react-router <Link/> which point to different pages. Each link checks the window.location.path to figure out if it is the active page so that the active menu item can render differently.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/core/List";

class MainMenu extends Component {
  render() {
    return (
      <List>
        <Link to="/products" className={window.location.pathname === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={window.location.pathname === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }
}

This was actually working fine, however I now want to connect this menu ponent to my redux store so that I can display some data from the store inside the menu, as soon as I add the connect function the menu breaks such that when changing pages the "active" class doesn't get applied. i.e. the ponent does not update even though window.location.pathname has changed.

I haven't included my store code because I've tested it with dummy reducers that do nothing and also I haven't even used the data anywhere in the ponent yet.

export default connect(state => ({ foo: state.bar }))(MainMenu);

I'm still not sure whether this issue is to do with connect or if connect has just highlighted a problem with using window.location.pathname and react doesn't know when to update.

Any help is greatly appreciated!

• javascript
• reactjs
• redux
• react-redux
• react-router

Share Follow edited Sep 25, 2018 at 11:33 CodeBoyCode 2,2671414 silver badges2929 bronze badges asked Sep 25, 2018 at 10:46 Felix SebastianFelix Sebastian 8711 silver badge44 bronze badges 1

• reacttraining./react-router/web/api/NavLink quote: "A special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL." – user5734311 Commented Sep 25, 2018 at 11:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

React ponent won't rerender when you change window.location.pathname. Only state changes will cause ponent to rerender. You need to listen to window.pathname change and map it to state then only your ponent will rerender

For such things you can take a look at react-router. Add it your project and such things can be easily achieved.

https://reacttraining./react-router/core

The view changes when there's any change in this.state of the ponent. I would suggest you to listen to changes in window.location

Here's the code

constructor(){
   this.state = {currentPath:window.location.pathname}

   window.onbeforeunload = function(e) {
      this.setState({currentPath:window.location.pathname})
   };
}

and in render()

render() {
    return (
      <List>
        <Link to="/products" className={this.state.currentPath === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={this.state.currentPath === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }