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?
Related
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:
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 using React Router 4. One concern I have is that if you use the <Link /> component to navigate between routes, lets say in your header, and you click on that same link again it will keep pushing the same url to browser history? Is there any way to prevent this behaviour, or is it completely up to me as developer to either replace that <Link /> with something something like a <span> element (if I dont want users to be able to click that link)?
Or should I do my own version of the <Link /> component and then inside that prevent from firing events when on the same route?
Yes, agree with #MaximeGirou. You can use your own trick.
Or another way is to define a class with some CSS properties [like cursor:not-allowed etc.] and give that class name in activeClassName attribute.
<NavLink to="/dashboard" activeClassName="linkActive">
<i className="icon icon-home" /> <span>Dashboard</span>
</NavLink>
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..
i am using semantic-ui (via react-semantic-ui). i want a little area for logon in the bottom of my menu column.
i have this:
i want this:
i did the above using position: absolute; bottom: 0, but i'm betting there's a semantic positioning class or react-semantic-ui component to use that would achieve it w/out manual styles
my components are as follows:
<Menu vertical fixed={'left'} inverted>
<Menu.Item name='account' active />
<Menu.Item name='settings' active={false} />
<Menu.Menu>
<img width="50px" height="50px" style={{ backgroundColor: 'red' }} />
<Menu.Item name='logout' active={false} onClick={() => null} />
</Menu.Menu>
</Menu>
I would use the Segment element. The attached prop is what you'll find most useful and you can easily customize it to become a full menu.
<Segment attached='bottom'></Segment>
You should easily be able to cusomize this to fit your stylistic needs.