Target Active Link when the route is active in Next.js
How to target the active Link in Next.js like they way we do it in React-Router-4?
Meaning, give the active link a class when its route is active?
reactjs react-router next.js
asked Nov 12 '18 at 12:31
Ruby
315221
add a comment |
How to target the active Link in Next.js like they way we do it in React-Router-4?
Meaning, give the active link a class when its route is active?
reactjs react-router next.js
asked Nov 12 '18 at 12:31
Ruby
315221
add a comment |
How to target the active Link in Next.js like they way we do it in React-Router-4?
Meaning, give the active link a class when its route is active?
reactjs react-router next.js
asked Nov 12 '18 at 12:31
Ruby
315221
How to target the active Link in Next.js like they way we do it in React-Router-4?
Meaning, give the active link a class when its route is active?
reactjs react-router next.js
reactjs react-router next.js
asked Nov 12 '18 at 12:31
Ruby
315221
asked Nov 12 '18 at 12:31
Ruby
315221
asked Nov 12 '18 at 12:31
Ruby
315221
asked Nov 12 '18 at 12:31
Ruby
315221
asked Nov 12 '18 at 12:31
Ruby
315221
315221
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
First, you need to have a component called Link, with temporary attribute activeClassName
import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'
const ActiveLink = ({ router, children, ...props }) => {
const child = Children.only(children)
let className = child.props.className || null
if (router.pathname === props.href && props.activeClassName) {
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
}
delete props.activeClassName
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}
export default withRouter(ActiveLink)
Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.
import Link from './Link'
export default () => (
<nav>
<style jsx>{`
.active:after {
content: ' (current page)';
}
.nav-link {
text-decoration: none;
padding: 10px;
display: block;
}
`}</style>
<ul>
<li>
<Link activeClassName='active' href='/'>
<a className='nav-link home-link'>Home</a>
</Link>
</li>
<li>
<Link activeClassName='active' href='/about'>
<a className='nav-link'>About</a>
</Link>
</li>
</ul>
</nav>
)
After that, you can implement the navigation bar to your page:
import Nav from '../components/Nav'
export default () => (
<div>
<Nav />
<p>Hello, I'm the home page</p>
</div>
)
The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.
Reference: here
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
add a comment |
Another minimal version which supports as prop:
import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";
export default withRouter(({router, children, as, href, ...rest}) => (
<Link {...rest} href={href} as={as}>
{React.cloneElement(Children.only(children), {
className: (router.asPath === href || router.asPath === as) ? `active` : null
})}
</Link>
));
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
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
});
}
});
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%2f53262263%2ftarget-active-link-when-the-route-is-active-in-next-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
First, you need to have a component called Link, with temporary attribute activeClassName
import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'
const ActiveLink = ({ router, children, ...props }) => {
const child = Children.only(children)
let className = child.props.className || null
if (router.pathname === props.href && props.activeClassName) {
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
}
delete props.activeClassName
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}
export default withRouter(ActiveLink)
Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.
import Link from './Link'
export default () => (
<nav>
<style jsx>{`
.active:after {
content: ' (current page)';
}
.nav-link {
text-decoration: none;
padding: 10px;
display: block;
}
`}</style>
<ul>
<li>
<Link activeClassName='active' href='/'>
<a className='nav-link home-link'>Home</a>
</Link>
</li>
<li>
<Link activeClassName='active' href='/about'>
<a className='nav-link'>About</a>
</Link>
</li>
</ul>
</nav>
)
After that, you can implement the navigation bar to your page:
import Nav from '../components/Nav'
export default () => (
<div>
<Nav />
<p>Hello, I'm the home page</p>
</div>
)
The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.
Reference: here
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
add a comment |
First, you need to have a component called Link, with temporary attribute activeClassName
import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'
const ActiveLink = ({ router, children, ...props }) => {
const child = Children.only(children)
let className = child.props.className || null
if (router.pathname === props.href && props.activeClassName) {
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
}
delete props.activeClassName
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}
export default withRouter(ActiveLink)
Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.
import Link from './Link'
export default () => (
<nav>
<style jsx>{`
.active:after {
content: ' (current page)';
}
.nav-link {
text-decoration: none;
padding: 10px;
display: block;
}
`}</style>
<ul>
<li>
<Link activeClassName='active' href='/'>
<a className='nav-link home-link'>Home</a>
</Link>
</li>
<li>
<Link activeClassName='active' href='/about'>
<a className='nav-link'>About</a>
</Link>
</li>
</ul>
</nav>
)
After that, you can implement the navigation bar to your page:
import Nav from '../components/Nav'
export default () => (
<div>
<Nav />
<p>Hello, I'm the home page</p>
</div>
)
The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.
Reference: here
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
add a comment |
First, you need to have a component called Link, with temporary attribute activeClassName
import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'
const ActiveLink = ({ router, children, ...props }) => {
const child = Children.only(children)
let className = child.props.className || null
if (router.pathname === props.href && props.activeClassName) {
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
}
delete props.activeClassName
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}
export default withRouter(ActiveLink)
Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.
import Link from './Link'
export default () => (
<nav>
<style jsx>{`
.active:after {
content: ' (current page)';
}
.nav-link {
text-decoration: none;
padding: 10px;
display: block;
}
`}</style>
<ul>
<li>
<Link activeClassName='active' href='/'>
<a className='nav-link home-link'>Home</a>
</Link>
</li>
<li>
<Link activeClassName='active' href='/about'>
<a className='nav-link'>About</a>
</Link>
</li>
</ul>
</nav>
)
After that, you can implement the navigation bar to your page:
import Nav from '../components/Nav'
export default () => (
<div>
<Nav />
<p>Hello, I'm the home page</p>
</div>
)
The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.
Reference: here
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
First, you need to have a component called Link, with temporary attribute activeClassName
import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'
const ActiveLink = ({ router, children, ...props }) => {
const child = Children.only(children)
let className = child.props.className || null
if (router.pathname === props.href && props.activeClassName) {
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
}
delete props.activeClassName
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}
export default withRouter(ActiveLink)
Then have a navigation bar with created component Link and css selector :active to differentiate between active and inactive link.
import Link from './Link'
export default () => (
<nav>
<style jsx>{`
.active:after {
content: ' (current page)';
}
.nav-link {
text-decoration: none;
padding: 10px;
display: block;
}
`}</style>
<ul>
<li>
<Link activeClassName='active' href='/'>
<a className='nav-link home-link'>Home</a>
</Link>
</li>
<li>
<Link activeClassName='active' href='/about'>
<a className='nav-link'>About</a>
</Link>
</li>
</ul>
</nav>
)
After that, you can implement the navigation bar to your page:
import Nav from '../components/Nav'
export default () => (
<div>
<Nav />
<p>Hello, I'm the home page</p>
</div>
)
The key of how does this work is located inside component Link, we compare the value of router.pathname with attribute href from the Link, if the value match the other then put specific className to make the link looks activated.
Reference: here
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
answered Nov 12 '18 at 16:14
Darryl R. Norbert
522315
522315
add a comment |
add a comment |
Another minimal version which supports as prop:
import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";
export default withRouter(({router, children, as, href, ...rest}) => (
<Link {...rest} href={href} as={as}>
{React.cloneElement(Children.only(children), {
className: (router.asPath === href || router.asPath === as) ? `active` : null
})}
</Link>
));
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
add a comment |
Another minimal version which supports as prop:
import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";
export default withRouter(({router, children, as, href, ...rest}) => (
<Link {...rest} href={href} as={as}>
{React.cloneElement(Children.only(children), {
className: (router.asPath === href || router.asPath === as) ? `active` : null
})}
</Link>
));
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
add a comment |
Another minimal version which supports as prop:
import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";
export default withRouter(({router, children, as, href, ...rest}) => (
<Link {...rest} href={href} as={as}>
{React.cloneElement(Children.only(children), {
className: (router.asPath === href || router.asPath === as) ? `active` : null
})}
</Link>
));
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
Another minimal version which supports as prop:
import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";
export default withRouter(({router, children, as, href, ...rest}) => (
<Link {...rest} href={href} as={as}>
{React.cloneElement(Children.only(children), {
className: (router.asPath === href || router.asPath === as) ? `active` : null
})}
</Link>
));
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
answered Dec 26 '18 at 11:23
Saman Mohamadi
1,47911836
1,47911836
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53262263%2ftarget-active-link-when-the-route-is-active-in-next-js%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
