This is my route configuration:
<Link className="nav-link " activeClassName="active" to={'/parent'}>
parent
</Link>
When I visit the url: https://localhost:8000/some-url/#/parent/ react applies the class active to link. But when I visit the path: https://localhost:8000/some-url/#/parent/child , react doesn't apply the active class.
Any suggestion on how to get the active class to be applied on the link when url is any descendent of the parent.
I have followed the documentation which says
The will be active if the current route is either the linked
route or any descendant of the linked route. To have the link be active only on the exact linked route, use instead or set the onlyActiveOnIndex prop.
But not sure why it is not getting applied by default.
Insted of using Link you should use NavLink as the documentation says
A special version of the <Link> that will add styling attributes to
the rendered element when it matches the current URL.
by using NavLink you should be able to achieve this also you can use things like exact, strict, isActive
Related
I've been reading the nextjs docs and it says in here that:
If the child of Link is a function component, in addition to using
passHref, you must wrap the component in React.forwardRef:
I'm new to using Semantic UI React so I'm not really sure if I need to do this and more importantly how to do this. I'm concerned about this because just before the quoted lines above, the docs says here that:
Without this (the passHref), the tag will not have the href attribute, which
might hurt your site’s SEO.
I can pass the passHref like this:
<Link href='/posts' passHref>
<Button>See Posts</Button>
</Link>
But the problem is that I don't think that we can wrap a component from Semantic UI with the React.forwardRef since it's just imported. So my questions are:
Is it just fine to let this be?
Or is there a workaround for this to "not hurt" my site's SEO?
Yes . The nextJs Documentation states if your child is not just an tag but a functional or class component then the passHref is needed. Make sure to pass it whenever you use a react component as a child
You need passHref only with some tags, here is an example. is not about SEO, and your quote is about "If your does not have passHref attribute and has child, your SEO might be broken".
Just create 2 pages with passHref and without, and check the pages, for example, with LIghthouse of chrome or any other tool. Also, check the DOM, you will see, no changes in SEO directly. (ofc if child components are html or even react components with no "required" href property.)
yes, in some cases you need to do the following according to the Nextjs documentation:
function NavLink({ href, name }) {
// Must add passHref to Link
return (
<Link href={href} passHref>
<RedLink>{name}</RedLink>
</Link>
)
}
I'm used Next.js but i have an error with dynamic route.
In my application I use getStaticPaths, getStaticProps and this:
<Link
href={`/offers/[id]?id=${offer.id}`}
as={`/offers/${offer.id}`}
>
<a>{offer.title}</a>
</Link>
When I click on this link, I have no problem with the dynamic route to display my page.
But when I refresh the same page, I get this message:
When I looked for a solution the answer was that my Link did not have the right setting when clicked on.
But now I don't click on the link, I just refresh my page.
I use Next.js 10.0.7
Since Next.js 9.5.3 there's no longer the need to use as for dynamic routes. Instead you can directly use the value to interpolate in href.
<Link href={`/offers/${offer.id}`}>
<a>{offer.title}</a>
</Link>
Alternatively, you can also use a different Link syntax by passing a URL object to it.
<Link
href={{
pathname: '/offers/[id]',
query: { id: offer.id }
}}
>
<a>{offer.title}</a>
</Link>
I had a similar problem. But I've been working with translations on the website.
So when I change selected language on any page it works fine, but as soon as I change language on any of the [id] page (item, article, etc.) I got the same error as you have.
In my case the problem was inside router.push() method I've used.
So when I pass router.pathname it returns /articles/[id] literally.
But actually I needed to use router.asPath which returns the correct URL path, such as /articles/abc123-456zczxc-7890-blablabla.
Here is an example from NextJS docs:
pathname: String - Current route. That is the path of the page in /pages, the configured basePath or locale is not included.
asPath: String - The path (including the query) shown in the browser without the configured basePath or locale.
NextJS API Reference Link
from page 1 I am trying to route to a specific section of page 2.
I tried to use the hash value in the Link component but it did not work
<Link to={ {pathname: `/page2`, hash: `#sectionID`}} >
I even used this package react-router-hash-link with no success.
I always end up at the top of page 2.
any help
Check This link for full explanation;
Hash link scroll functionality for React Router, and here is example that will scroll to the component when you open it: baz#section-three, another one baz#section-two
While learning React I stumbled upon a property I haven't seen before: "to" on a Link tag.
<Link to="/login" className="btn btn-link">Cancel</Link>
Can't find the docs to this - I guess it's a React specific property because I couldn't find it in the regular docs.
There must be a difference compared to "href" otherwise it shouldn't exist ;)
Can anyone point me in the right direction?
That's a React Router <Link/>, so it's a bit special. It ties in to the <Router> and <Route> components and is used to navigate around in a Single-Page App. A standard anchor tag (even if it has an href that matches one of your <Route> paths) doesn't interact with React Router, so will cause a full-page reload.
It's a react router prop for navigation. It can be an object or a string.
to - A string representation of the location to link to, created by concatenating the location’s pathname, search, and hash properties.
to - An object that can have any of the following properties:
pathname: A string representing the path to link to.
search: A string representation of query parameters.
hash: A hash to put in the URL, e.g. #a-hash.
state: State to persist to the location.
react router docs
Since <Link /> is a component from a third-party library, it can have any props it wants and is not limited to the html element props in React's docs.
In this case to is the name of the prop used by React Router to specify where the Link component should "link to" when clicked.
In my application I am using react router 3
For navigation menu i have used
<nav>
<NavItem> </NavItem>
</nav>
It is working fine on click of nav menu but when going back using browser back, the url changed but the active class does not applied.
I will try to explain how it should be done generally, not framework specific. you can implement the same in any framework after that
in order to make stateful navigation, You can take advantage of query parameters.
all you have to do on click of the nav you have to append some value to the query parameters which will identify its uniqueness.
and on the component initialization you have to read the query params and programmatically select that tab.(apply css class to it)
For example, you have:
url:somedomain.com/home -- this is where you have navigation
NavItem1 href="somedomain.com/home?nav=tab1"
NavItem2 href="somedomain.com/home?nav=tab2"
NavItem3 href="somedomain.com/home?nav=tab3"
when the component initializes , you have to read the query params if exists and give the appropriate class to the particular NavItem