React Nav Link activeStyle not being applied when url has parameter
1
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>
reactjs react-router
asked Nov 16 '18 at 16:25
RJKRJK
637
add a comment |
1
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>
reactjs react-router
asked Nov 16 '18 at 16:25
RJKRJK
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 addingexactbut 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 ownisActiveabstraction.
– Enmanuel Duran
Nov 16 '18 at 16:37
add a comment |
1
1
1
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>
reactjs react-router
asked Nov 16 '18 at 16:25
RJKRJK
637
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>
reactjs react-router
reactjs react-router
asked Nov 16 '18 at 16:25
RJKRJK
637
asked Nov 16 '18 at 16:25
RJKRJK
637
asked Nov 16 '18 at 16:25
RJKRJK
637
asked Nov 16 '18 at 16:25
RJKRJK
637
asked Nov 16 '18 at 16:25
RJKRJK
637
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 addingexactbut 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 ownisActiveabstraction.
– 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 addingexactbut 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 ownisActiveabstraction.
– Enmanuel Duran
Nov 16 '18 at 16:37
see stackoverflow.com/questions/45158135/…
– Enmanuel Duran
Nov 16 '18 at 16:28
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
@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
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
0
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>
answered Nov 16 '18 at 16:42
DmitriyDmitriy
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>
answered Nov 16 '18 at 16:42
DmitriyDmitriy
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 |
0
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>
answered Nov 16 '18 at 16:42
DmitriyDmitriy
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 |
0
0
0
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>
answered Nov 16 '18 at 16:42
DmitriyDmitriy
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>
answered Nov 16 '18 at 16:42
DmitriyDmitriy
490212
edited Nov 16 '18 at 20:27
answered Nov 16 '18 at 16:42
DmitriyDmitriy
490212
answered Nov 16 '18 at 16:42
DmitriyDmitriy
490212
answered Nov 16 '18 at 16:42
DmitriyDmitriy
490212
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
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
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
exactbut 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
isActiveabstraction.– Enmanuel Duran
Nov 16 '18 at 16:37