I need your suggestions and ideas please. I'm using a long sentence in a react <NavLink> to point to a page. I'm supposed to make just the "Click here" show the hand and make it clickable to the component. Any ideas would be appreciated.
<ul>
<li>
<NavLink to="/page">
This is long sentence but "click here" to get to the page
</Navlink>
</li>
</ul>
Have you tried this?
<ul>
<li>
This is long sentence but <NavLink to="/page">click here</NavLink> to get to the page
</li>
</ul>
You can just wrap "click here" with the NavLink:
<ul>
<li>
This is long sentence but
<NavLink to="/page">
"click here"
</Navlink>
to get to the page
</li>
</ul>
NavLinks are essentially just anchor tags and function the same way
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
Related
I've created a component that outputs a navigation menu.
I'm calling this component from within another component that outputs a website header.
export default function HeaderNav() {
return(
<nav className={styles.headerNav}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/tests/test001">Test 1</Link>
</li>
<li>
<Link to="/tests/test002">Test 2</Link>
</li>
<li>
<Link to="/tests/test003">Test 3</Link>
</li>
</ul>
</nav>
)
}
I've found that React is wrapping my navigation component in a parent div:
https://imgur.com/a/7gXEJ1F
The addition of this wrapping div creates problems for styling. Especially when it comes to layout for the header.
Ideally I'd like to additional wrapper to not exist. But if there's no way to prevent it from existing, then giving it a classname might help to reduce the issues for styling it.
How can I do either of these things?
Enclose your navigation component between <React.Fragment></React.Fragment> or with shorthand <></>. To further read about React.Fragment
I have been stuck for hours to figure out how to add classActive on the parent html tag of the provided reactrouter tag. Here is the code,
Using React-Router "version": "3.2.6"
<li className="sidebar-item">
<div className="sidebar-link" activeClassName="active">
<span>Track Page</span>
<div className="collapse first-level">
<Link className="first-level__link" to="/track-page" activeClassName="active">
Track Page 1
</Link>
<Link className="first-level__link" to="/track-page-2" activeClassName="active">
Track Page 2
</Link>
</div>
</div>
</li>
Currently the active class can only be kept on <link> tag but I need it to be on the <li> the parent of the <link>. How can I achieve this ? Please help.
I am not very familiar with react so, any help here would be much appreciated. Thank you in advance.
Use <NavLink> instead of <Link> and add exact as a property
Include exact as a property to ensure activeClassName only triggers on url paths that match your location exactly
if you want add active class to li tag also which is the parent
you can use a function to get the NavLinkClass
you can use the useLocation to get the exact location
import { useLocation,NavLink } from "react-router-dom";
const location = useLocation();
const getNavLinkClass = path => {
return location.pathname === path
? "sidebar-item active"
: "sidebar-item";
};
<li className={getNavLinkClass("/track-page")>
<div className="sidebar-link">
<span>Track Page</span>
<div className="collapse first-level">
<NavLink
className="first-level__link"
to="/track-page"
activeClassName="active"
>
Track Page 1
</NavLink>
<NavLink
className="first-level__link"
to="/track-page-2"
activeClassName="active"
>
Track Page 2
</NavLink>
</div>
</div>
</li>
Try by adding style to anchor element like below.
<Link to="/track-page" >
<a className="first-level__link_active"> Track Page 1 </a>
</Link>
<Link to="/track-page-2" activeClassName="active">
<a className="first-level__link_active">Track Page 2 </a>
</Link>
Using this.props.location.pathname you get the current page url. so you can set the condition when page url match you give the active class anywhere you want.
Try this code may be it's help you
render() {
const url = this.props.location.pathname + this.props.location.search;
<li className="sidebar-item">
<div className="sidebar-link">
<span>Track Page</span>
<div className="collapse first-level">
<div className={url == '/track-page' ? 'active' : ''}>
<Link className="first-level__link" to="/track-page" activeClassName="active">
Track Page 1
</Link>
</div>
<div className={url == '/track-page-2' ? 'active' : ''}>
<Link className="first-level__link" to="/track-page-2" activeClassName="active">
Track Page 2
</Link>
</div>
</div>
</div>
</li>
}
here is the demo code sandbox : https://codesandbox.io/s/black-platform-gz5qx?file=/src/App.js
you can use window.location.pathname to get the current route. you might want to use something like the following sample code.
export default function App() {
const location = window.location.pathname;
return (
<div className="outer">
<h1>Hello CodeSandbox</h1>
<a
href="/track-page"
className={`link ${location === "/track-page" ? "active" : ""}`}
>
/track-page
</a>
<a
href="/track-page-2"
className={`link ${location === "/track-page-2" ? "active" : ""}`}
>
/track-page-2
</a>
<a
href="/track-page-3"
className={`link ${location === "/track-page-3" ? "active" : ""}`}
>
/track-page-3
</a>
</div>
);
}
I'm trying to create navigation between some categories while changing the link on click
I need to get this localhost/blog/category/:category1 it works for the first category selected but when I click again I get this localhost/blog/category/blog/category/:category2.
I'm using LINK for redirection
<Link
className="nav-link"
aria-current="page"
to={`blog/category/${item}`}
>
thank you
try this :
<Link
className="nav-link"
aria-current="page"
to={`/blog/category/${item}`}
>
<ul>
<li>
<Link to={'/home'}>
Home
</Link>
</li>
<li>
<Link to={'/story'}>
About us
</Link>
</li>
</ul>
I have above navigation tab in reactjs and I would like to toggle active class on click between links. I have been go through on various stacks but not able to find proper answer for above scenerio.
One can use react-router/web#NavLink instead react-router/web#Link.
Attach the class that you want to use as a active class using activeClassName property of NavLink.
<ul>
<li>
<NavLinkto={'/home'} activeClassName="selected">Home</NavLink>
</li>
<li>
<NavLinkto={'/story'} activeClassName="selectedSec">About us</NavLink>
</li>
</ul>
I am new in angular and I have been using angular-sidebarjs in my app. I have given my code of sidebar directive below.
in my template:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
radius.name
</li>
</ul>
</nav>
</sidebarjs>
in my home.js:
var home = angular.module('wm.home',[uiRouter,'ngSidebarJS'])
When I click on an option among the list, sidebar doesn't close and the required page loads behind. sidebar closes only when I click on the toggle button or outside the sidebar.
How to close the sidebar onclick of any of the options in the list?
You should add the attribute sidebarjs-toggle to your options, like this:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
<a sidebarjs-toggle href="#" ng-click="listMenus()" ui-sref="users({radius_id: radius_id})" ui-sref-opts="{reload: true}">radius.name</a>
</li>
</ul>
</nav>
</sidebarjs>
Also, I think you should remove that href="#" because you are already doing the routing with the ui-sref.