I have created a custom home page and I am using the menu from WordPress admin.
The links work fine, but when I click on the link for the Home it refreshes the site. But the other pages do not refresh, and they come from WP.
How do I stop it from refreshing?
Do I need to use tiny-router? In that case, where do I put the code?
Thanks!
Hi,
you should use the Link component.
I had the same “error” with “a” instead of Link.
Because the Link component routes it internal.
Hi,
Thank you for your reply!
But I am getting the menu generated from WP, so where do I put the Link component?
Hi again,
I think I solved it. But don’t know if it is the right thing to do. So that WP generates all but the link for Home.
Like this:
<Menu>
<Link
link="/"
css={css`
color: orange;
text-decoration: none;
margin-right: 1em;
`}
>
Home
</Link>
{items.map((item) => {
return (
<nav key={item.ID}>
<Link
link={item.url}
css={css`
color: orange;
text-decoration: none;
margin-right: 1em;
`}
>
{item.title}
</Link>
</nav>
I believe it’s correct, the navigation component by default in mars-theme is configured this way looking for the name of the state:
const Nav = ({ state }) => (
<NavContainer>
{state.theme.menu.map(([name, link]) => {
// Check if the link matched the current page url
const data = state.source.get(state.router.link);
const isCurrentPage = data.route === link;
return (
<NavItem key={name}>
{/* If link url is the current page, add `aria-current` for a11y */}
<Link link={link} aria-current={isCurrentPage ? "page" : undefined}>
{name}
</Link>
</NavItem>
);
})}
</NavContainer>
);
