It does go to the correct page, however, how can I make a background effect or change the font color when the link is active? I tried a CSS with this and it does not work.
codesandbox:https://codesandbox.io/s/cocky-sun-xg80c5?file=/src/App.js
.active{
background-color: 'red';
}
{pages.map((page) => (
<Link
to={page.link}
spy={true}
smooth={true}
offset={-100}
duration={500}
activeClass="active"
key={page.id}
>
<Button
key={page.id}
sx={{
my: 2,
color: "black",
display: "block",
}}
>
{page.title}
</Button>
</Link>
))}
This is my json package:
Why would you wrapp a Button inside a Link Element ?
A Link is a semantic Element that links to another part of your page or an external page so I don't see a reason for nesting a button inside a link.
So I ended up with something like this and this works fine for me now:
Related
I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.
{nav.nav &&
nav.nav.map((sub, subIndex) => (
<ListItem
key={subIndex}
button
component={NavLink}
to={sub.link}
end={true}
>
<ListItemIcon sx={{ minWidth: "40px" }}>
{sub.icon}
</ListItemIcon>
<ListItemText
primary={sub.name}
primaryTypographyProps={{
variant: "body2",
}}
/>
</ListItem>
))}
video gif
I'm using react-scroll to scroll from the Nav to any preset anchor element.
I chose it because it also provides an active class to the Nav items when element is in viewport.
This exmple works if i'm on the HomePage. But if i click the navbar item from another page it doesn't work.
I need to make the scrolling work from another page as well.
Need to mention that all the Anchor Elements are on the HomePage and using create-react-app with v5 router.
CODESANDBOX example
Github issue link
PS: If you know any better library that can do this and add active class please post it here.
import { Element} from 'react-scroll';
export function HomePage() {
return (
<>
<title>Home</title>
<Banner />
<Element name="price-plan-list">
<PriceplanList />
</Element>
<Element name="entertainment-area">
<EntertainmentArea />
</Element>
</>
);
}
And this is the NavbarItem:
import { Link as AnchorLink } from 'react-scroll';
<NavItem key={index}>
<AnchorLink
activeClass="active"
to={item.link}
spy={true}
hashSpy={true}
duration={1000}
>
{item.title}
</AnchorLink>
</NavItem>
I'm making a website using react and I want a button to scroll to footer section of my website. I am using react-scroll and it is working. I am also using material ui to style my button using their Button component. This is my code snippet.
<StyledButton>
<Link
activeClass="active"
to="Contact"
spy={true}
smooth={true}
offset={-20}
duration={900}
>
Get In Touch
</Link>
</StyledButton>
This works but the only issue is it only works when I click on the text in the button. If I click anywhere else in the button(inside the button but not on text), it doesn't scroll to footer section. Any suggestions on how do I do that? Thanks.
You should place your Link outside of the button.
<Link
activeClass="active"
to="Contact"
spy={true}
smooth={true}
offset={-20}
duration={900}
>
<StyledButton>
Get In Touch
</StyledButton>
</Link>
This way, your whole button gets 'linked' to the element you provided
I have the following:
<Link className="nav-link" activeClassName="active-link"
activeStyle={{ color: "red" }} to="/">welcome</Link>
The style is applied properly, but the classname ("active-link") is not. Checking the dom, the classname is not there on the element.
Where should I look for the problem?
There is an issue regarding anchor tags in React Bootstrap and React Router. I was curious on how other people have handled the situation. It is possible to just leave an anchor tag with an href such as Site Title and avoid using IndexLinkContainer. There is also using MenuItem such as.
<Navbar.Brand>
<IndexLinkContainer to={{pathname: '/'}}>
<MenuItem>TitleName</MenuItem>
</IndexLinkContainer>
</Navbar.Brand>
However this leaves a hidious looking bullet point to the far left of the navbar. If anyone else has any ideas on how to tackle this I would appreciate it.
That's what I did (with LinkContainer from react-router-bootstrap):
<LinkContainer to="/" style={{ cursor: 'pointer' }}>
<Navbar.Brand>
<span style={{ width: 95 }}>Some text</span>
<img src="somesrc" style={{ height:20, float:'right', marginLeft:10 }}/>
</Navbar.Brand>
</LinkContainer>
Contains site's name and logo.
No bullet point but I couldn't find a way to avoid using LinkContainer..