React Nav Link activeStyle not being applied when url has parameter

I have a NavLink header. The user logs in first, then the url has the user email as a url parameter.

The problem is that the activeStyle is not being applied because I think the NavLink to url is not matching up. Or I am not using activeStyle right. If I need to have the url parameter, is there a work-around to get activeStyle to work with my NavLinks?

<div>

  <ul>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>

  </ul>

</div>



<div>

  <Route path="/jasper/about" component={About} />

  <Route exact path="/jasper" component={Jasper} />

  <Route path="/jasper/contact" component={Contact} />

  <Route path="/jasper/search" component={Search} />

</div>

asked Nov 16 '18 at 16:25

RJK

637

see stackoverflow.com/questions/45158135/…

– Enmanuel Duran
Nov 16 '18 at 16:28

@EnmanuelDuran I saw the same thing before I posdted and I've tried adding exact but it didn't work.

– RJK
Nov 16 '18 at 16:30

Not sure if NavLink supports this natively. A workaround would be to add a class dynamically to each link using your own isActive abstraction.

– Enmanuel Duran
Nov 16 '18 at 16:37

add a comment |

I have a NavLink header. The user logs in first, then the url has the user email as a url parameter.

<div>

  <ul>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>

  </ul>

</div>



<div>

  <Route path="/jasper/about" component={About} />

  <Route exact path="/jasper" component={Jasper} />

  <Route path="/jasper/contact" component={Contact} />

  <Route path="/jasper/search" component={Search} />

</div>

asked Nov 16 '18 at 16:25

RJK

637

see stackoverflow.com/questions/45158135/…

– Enmanuel Duran
Nov 16 '18 at 16:28

@EnmanuelDuran I saw the same thing before I posdted and I've tried adding exact but it didn't work.

– RJK
Nov 16 '18 at 16:30

Not sure if NavLink supports this natively. A workaround would be to add a class dynamically to each link using your own isActive abstraction.

– Enmanuel Duran
Nov 16 '18 at 16:37

add a comment |

I have a NavLink header. The user logs in first, then the url has the user email as a url parameter.

<div>

  <ul>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>

  </ul>

</div>



<div>

  <Route path="/jasper/about" component={About} />

  <Route exact path="/jasper" component={Jasper} />

  <Route path="/jasper/contact" component={Contact} />

  <Route path="/jasper/search" component={Search} />

</div>

asked Nov 16 '18 at 16:25

RJK

637

I have a NavLink header. The user logs in first, then the url has the user email as a url parameter.

<div>

  <ul>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>

    <li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>

  </ul>

</div>



<div>

  <Route path="/jasper/about" component={About} />

  <Route exact path="/jasper" component={Jasper} />

  <Route path="/jasper/contact" component={Contact} />

  <Route path="/jasper/search" component={Search} />

</div>

reactjs react-router

asked Nov 16 '18 at 16:25

RJK

637

asked Nov 16 '18 at 16:25

RJK

637

asked Nov 16 '18 at 16:25

RJK

637

asked Nov 16 '18 at 16:25

RJK

637

asked Nov 16 '18 at 16:25

RJK

637

see stackoverflow.com/questions/45158135/…

– Enmanuel Duran
Nov 16 '18 at 16:28

@EnmanuelDuran I saw the same thing before I posdted and I've tried adding exact but it didn't work.

– RJK
Nov 16 '18 at 16:30

Not sure if NavLink supports this natively. A workaround would be to add a class dynamically to each link using your own isActive abstraction.

– Enmanuel Duran
Nov 16 '18 at 16:37

add a comment |

see stackoverflow.com/questions/45158135/…

– Enmanuel Duran
Nov 16 '18 at 16:28

@EnmanuelDuran I saw the same thing before I posdted and I've tried adding exact but it didn't work.

– RJK
Nov 16 '18 at 16:30

Not sure if NavLink supports this natively. A workaround would be to add a class dynamically to each link using your own isActive abstraction.

– Enmanuel Duran
Nov 16 '18 at 16:37

see stackoverflow.com/questions/45158135/…

– Enmanuel Duran
Nov 16 '18 at 16:28

@EnmanuelDuran I saw the same thing before I posdted and I've tried adding exact but it didn't work.

– RJK
Nov 16 '18 at 16:30

Not sure if NavLink supports this natively. A workaround would be to add a class dynamically to each link using your own isActive abstraction.

– Enmanuel Duran
Nov 16 '18 at 16:37

add a comment |

1 Answer
1

active

oldest

votes

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink

  to="/events/123"

  isActive={(location) => location.pathname === this.props.pathname + email}

>Event 123</NavLink>

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341809%2freact-nav-link-activestyle-not-being-applied-when-url-has-parameter%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink

  to="/events/123"

  isActive={(location) => location.pathname === this.props.pathname + email}

>Event 123</NavLink>

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

add a comment |

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink

  to="/events/123"

  isActive={(location) => location.pathname === this.props.pathname + email}

>Event 123</NavLink>

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

add a comment |

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink

  to="/events/123"

  isActive={(location) => location.pathname === this.props.pathname + email}

>Event 123</NavLink>

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

You can add an isActive property and use logic for the active state to include the email at the end of the pathname

<NavLink

  to="/events/123"

  isActive={(location) => location.pathname === this.props.pathname + email}

>Event 123</NavLink>

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

edited Nov 16 '18 at 20:27

answered Nov 16 '18 at 16:42

Dmitriy

490212

answered Nov 16 '18 at 16:42

Dmitriy

490212

answered Nov 16 '18 at 16:42

Dmitriy

490212

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

add a comment |

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

thank you for your reply. i have been trying to add this logic all morning but i have been having issue. could you elaborate on the logic specifically?

– RJK
Nov 16 '18 at 18:50

The isActive property will return true or false, You can pass the isActive function a location object which holds the pathname and a bunch of other properties, that location object should give you properties that you can match up to tell the isActive property to return true when you want it. Check out these two links github.com/ReactTraining/react-router/blob/master/packages/… github.com/ReactTraining/react-router/blob/master/packages/…

– Dmitriy
Nov 16 '18 at 20:27

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk