I am having trouble using the default Bootstrap Nav pills as the links on the Navbar for my page, where they show if the pill is active or not. As I have the code, the NavLink is just in plain text and I can't seem to use any of the active styling from Bootstrap.
I am using Bootstrap 4 and React with React Router.
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg bg-light navbar-light">
<ul className="nav nav-pills">{this.renderNavLinks()}</ul>
</nav>
);
}
renderNavLinks() {
const navButton = {
padding: "10px"
};
return this.props.navLinks.map(l => (
<li className="nav-item" style={navButton}>
<NavLink className="active" to={"/" + l.id}>{l.text}</NavLink>
</li>
));
}
}
export default NavBar;
I want my NavBar to actively show what page is currently being displayed using Bootstrap's default pill style buttons.
You are missing the nav-link css class on the NavLink component.
<NavLink className="nav-link" to={"/" + l.id}>{l.text}</NavLink>
Reference
Related
i'm an beginner in react i try to make a website with it
my problem is change a CSS property for a component from another one to open a Nav menu
i make that with querySelector but i don't know if that is the best way to do
here to open the nav menu :
import './Navbar.css'
function Navbar() {
const handOpenMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = 'display: flex'
}
return (
<header className="navbar container">
<a className='logo' href='/#'>pure mix</a>
<i className="fa-solid fa-bars burgerBtn" onClick={handOpenMenu}></i>
</header>
)
}
export default Navbar
and here for close the nav menu :
import "./Navmenu.css";
function Navmenu() {
const handlCloseMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = "display: none";
}
return (
<div className="navMenu">
<a className="navItem" href="/#">
home
</a>
<a className="navItem" href="/#">
about
</a>
<a className="navItem" href="/#">
logo
</a>
<a className="navItem" href="/#">
contact
</a>
<i className="fa-solid fa-xmark close" onClick={handlCloseMenu}></i>
</div>
);
}
export default Navmenu;
Using useState hook for change state in your component
The best solution would be to use the useState hook and pass in Boolean values of true or false. True would render the navbar component while false would not render it. Here is a link that describes how you would implement this in the best way possible(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)
I'm making a tab bar for phone in react js and i have icons on it. I'm using React Router to perform the routes. Right now im able to change the icon color when it is active using an .active class. Is there a way I can change the Icon File when the route is active? Here is the code attached below.
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import home_icon_stroke from './home_icon_stroke.svg';
import explore_icon_stroke from './explore_icon_stroke.svg';
import activity_icon_stroke from './activity_icon_stroke.svg';
import library_icon_stroke from './library_icon_stroke.svg';
import profile_icon_stroke from './profile_icon_stroke.svg';
import './Phonetabbar.css';
export default class Phonetabbar extends Component {
render() {
return (
<div className="phone-tabbar-layout" >
<div className="fixed" >
<div className="phone-tabbar-list">
<div className="tabbar-cell">
<NavLink exact to="/" >
<img src={home_icon_stroke} ></img>
</NavLink>
</div>
<div className="tabbar-cell">
<NavLink to="/explore" >
<img src={activity_icon_stroke} ></img>
</NavLink>
</div>
</div>
</div>
</div>
)
}
}
Maybe you want to try passing the isActive function to Navlink, setting a state in it.
<NavLink exact to="/"
isActive={(match, location)=>{
if(match){
//set isActive state true
}
return match;
}
>
<img src={isActive?home_icon_stroke:anotherImg} ></img>
</NavLink>
I have a Navbar React component with a Link component which needs to scroll down to Section component when clicked. I have implemented react-scroll, however, when I click on the Link component, I get target element not found in the browser console.
The Navbar component:
import React, { Component } from "react";
import { Link, animateScroll as scroll, scroller } from "react-scroll";
class Navbar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="section1" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
</li>
</ul>
</div>
);
}
}
export default Navbar;
And the App.js file:
import React from "react";
// Styling
import "./styles/App.css";
// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";
function App() {
return (
<div className="App">
<div>
<Navbar />
<SectionOne id="section1"/>
</div>
</div>
);
}
export default App;
I used this repo as a reference, however, things don't work. What have I missed here?
I have implemented a div inside of the SectionOne component
<div id="section-one-wrapper">Section One content...</div>
and then specified that id in the Link component:
<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
and it worked.
I render some <NavLink /> like below
<div class="container">
<NavLink to="/" exact></NavLink>
<NavLink to="/profile"></NavLink>
<NavLink to="/message"></NavLink>
</div>
it's cool that react-router will add an active class to which is currently matched.
but how do I know which one is currently active ?
because I have some other styles to adjust based on this, like when in '/' I want to give .container 100px padding-left, and when in '/profile', I want to give .container 200px padding-left.
You can use withRouter to get the path of the current page, by using pathname you can file which is your current page.
import React from "react";
import { withRouter } from "react-router";
class Location extends React.Component {
render() {
const { match, location, history } = this.props;
return <div>You are now at {location.pathname}</div>;
}
}
const WithRouter = withRouter(ShowTheLocation);
You can add a different activeClassName to each of them.
(See https://reacttraining.com/react-router/web/api/NavLink)
For example
<div class="container">
<NavLink to="/" exact></NavLink>
<NavLink to="/profile" activeClassName="matched-profile"></NavLink>
<NavLink to="/message"></NavLink>
</div>
Then style container like this .container:has(.matched-profile)
I have a problem with a navigation responsive menu.
When I resize the page, I can see the hamburger menu and everything works fine.But I am trying to put a toggle or slidetoggle in react like in jquery.I created a toggle button but does not work correctly. Above is the code, I created a handleClick button for the hamburger menu and a state cond. className="mynav" in css file is display:none;. I want when the size of page is small and when I push the hamburger button to see the menu.
import React, { Component } from 'react'
import './Navbar.css';
import {Link} from 'react-router-dom';
export default class Navbar extends Component {
state = {
cond: false,
}
handleClick=()=>{
this.setState({
cond:!this.state.cond
})
}
render() {
return (
<nav>
<div className="mylogo">
<div className="logo">
logo
</div>
<div id="mybtn" onClick={this.handleClick}>
<div className="bar1"></div>
<div className="bar2"></div>
<div className="bar3"></div>
</div>
</div>
{this.state.cond ? <div className="mynav" >
<ul>
<li>
<Link to='/'>home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
<li>
<Link to='/projects'>Projects</Link>
</li>
<li>
<Link to='/contact'>Contact</Link>
</li>
</ul>
</div> :false
}
</nav>
)
}
}
Wrap you state declaration in a constructor, something like this:
export default class Navbar extends Component {
constructor(props) {
super(props)
this.state = {
cond: false,
};
}
Then your onClick method will have access to the keyword 'this'. It wasn't able to access this.state without that.