I'm new in React, and I use react-router and bootstrap version 3.4 examples section.
First example - when I run my project doesn't show my project. I will show the codes:
import React from "react"
class Header extends React.Component{
render(){
return(
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default Header
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
this may help
Both and components can be used to define and design declarative navigation around an application. Within either component, we can use the “to” attribute to specify the location pathname to which the link will direct.
import { NavLink } from "react-router-dom";
<NavLink to="/" className="<any classes like>float-left">Home</NavLink>
<NavLink to="/about" className="<any classes like>float-left">About</NavLink>
here is a great example
https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900
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'm new to React and Bootstrap. I'm using Bootstrap 5.1.
I'm trying to create a Navbar with my logo in it. No matter what I try, I can't get the image to display. Here is my Navbar.js
import React from 'react';
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src="/img/logo.svg" width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
The path to the logo is here, '/react-app/src/img/logo.svg' and I've tried pathing it multiple different ways without success.
And here is what I see.
What am I missing?
You need to use import to load the path like this:
import houseImgPath from './img/logo2.png' // replace with your own path
and then use it in your img src
<img alt="House" src={houseImgPath} width="30" height="30"/>
You should keep your image somewhere inside the src as you are doing (contrary to other suggestions) and import it like a module. The only time you might use the public folder is (maybe) if you wanted to preload the image or use the image as an icon for the app.
import React from 'react';
import img from './img/image.jpg' // or '../path/relative/to/component/image.jpg'
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src={img} width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
You need to import the image for example:
import imageName from './img/logo2.png';
<img alt="House" src={imageName} width="30" height="30"/>
you need to put images in public folder in order to get this path img/logo2.png try it please and let me know
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.
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.
I am using SpringBoot and Angular JS for my web application and I would like to know a good way to change the navigation menu based on the user logged.
I was placing the navigation bar inside all the views but im sure there is a better way to do it.
User.class
#Entity
public class Usuario implements Serializable {
#Enumerated(EnumType.STRING)
private Rol rol; -> This can be "UserA","UserB","UserC"
}
And my different navigation menus are
Navigation for UserA
<nav id="nav">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
Navigation for UserB
<nav id="nav">
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</nav>
Navigation for UserC
<nav id="nav">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>
Thanks!
You can use ng-show, ng-if or ng-switch. Beter use ng-if or ng-switch as it doesn't create html for other roles and other users wont be able to see links for other roles if they do inspect element. ng-show will just hide only(adds the display:none style)
In controller get the role
JS
$scope.role = $http.get("some url to get role");
HTML
<nav id="nav" ng-switch='role'>
<ul ng-switch-when='userA'>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<ul ng-switch-when='userB'>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<ul ng-switch-when='userC'>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<ul ng-switch-default='userDefault'>
<li>Default1</li>
<li>Default2</li>
<li>Default3</li>
</ul>
</nav>
Default is optional
For all nav add ng-show and control your rol. And you have set your rol to $scope.role
<nav id="nav" ng-show="role=='userA'">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
If you don't want to use ajax call;You can set $scope.role value on your jsp and when user changed result will be changed. You can use "JSTL" or "Jsp shortTag" shortTag example;
<nav id="nav" ng-show="<%=rol%>=='userC'">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>