I'm using React-Bootstrap to make a navigation menu. The toggle button once expanded contains my nav items to go to different parts of my app. So far I know it is supposed to be responsive to small-screened devices as the nav items disappear inside the toggle button as soon as the display width is smaller than 768px and appear inside the navbar if the screen is any wider.
What I want is to keep the toggle button, its behavior and its nav items (from the Navbar.Collapse) inside at all times. I've searched the documentation and other questions but haven't found any way to do this.
Here is my code :
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { actionCreators } from '../store/ExpeditionStore';
import './NavMenu.css';
const translations = require('../Translations');
class NavMenu extends React.Component {
render() {
return (
<Navbar inverse fixedTop fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
<Navbar.Brand>
{this.props.title}
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem>
<Glyphicon glyph='plane' />{translations.getCaption('shipment')}
</NavItem>
</Nav>
<Nav>
<NavItem onClick={() => this.props.switchLanguage(translations)}>
EN/FR
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default connect(
state => state.expeditionStore,
dispatch => bindActionCreators(actionCreators, dispatch)
)(NavMenu);
How to keep my toggle button and the Navbar.Collapse nav items inside it even if the device is wider than 768px?
Add expand attribute with value of "xl" or "xxl" to main Navbar tag. eg: expand="xxl"
Instead of using React-bootstrap approach, I suggest using normal bootstrap to achieve this result.
Put Bootstrap CDN link in your index.html file. Then this normal JSX code works for me:
<nav className="navbar narbar-expand-xl"> </nav>
Because the Bootstrap class narbar-expand-xl indicates that when screen equal or lower than the desktop size, the navbar will will collapse.
Related
I am trying to show an active <Nav.Link> element for the current page, but it keeps getting reset when I go between pages to the default value. Each of the links goes to a different route I have defined in React-Router. I am trying to use jotai for state management to store the value of the current page, but am not able to get the correct value to display.
For example, the code below has pills to show the active selection in the nav. I want to be able to do this even when I go to a different page since this is the nav menu.
import Nav from 'react-bootstrap/Nav';
function TabsExample() {
return (
<Nav variant="pills" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default TabsExample;
However, I believe my page keeps re-rendering/reloading (goes white for a brief second) for some reason whenever I go to a different page.
There might be something I'm not getting, so please let me know.
The issue here is likely that the Nav.Link component renders an anchor <a> element by default and this is causing the page to reload when you click the links. You can specify each Nav.Link to render the NavLink (or Link) component exported from react-router-dom so that clicking links will now correctly be handled by RRD. Specify a to prop instead of an href prop, and set the eventKey prop to match the link target so the "pill" state can work as well.
Example:
import { NavLink } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";
function PillsExample() {
return (
<Nav variant="pills">
<Nav.Item>
<Nav.Link as={NavLink} end to="/" eventKey="/"> // * Note on end prop
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link as={NavLink} to="/foo" eventKey="/foo">
Foo
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link as={NavLink} to="/bar" eventKey="/bar">
Bar
</Nav.Link>
</Nav.Item>
</Nav>
);
}
* Note: If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. See NavLink for more component details.
I have a Main page that contains 4 section ** #home, #collection, #products and #contact** and I have 2 different page for /cart and /login
Navbar Code is Here
`<nav>
<div className='wrap-nav'>
<NavLink href="" className='logo'>NILESTORE</NavLink>
<div className='wrap-ul'>
<ul className='nav-links' >
<li><NavLink to="#home">Home</NavLink></li>
<li><NavLink to="#collection">Collection</NavLink></li>
<li><NavLink to="#products">Products</NavLink></li>
<li><NavLink to="#contact">Contact</NavLink></li>
</ul>
<ul className='nav-items'>
<li><NavLink to="/cart" className='cart' data-item={data.cartItems.length}><BsBag /></NavLink></li>
<li><NavLink to="/login" className='login'>Login</NavLink></li>
</ul>
</div>
</div>
</nav>`
App.js code is here
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css"
import Navbar from './components/Navbar'
import Cart from './pages/Cart';
import Main from './pages/Main';
function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/cart" element={<Cart />} />
</Routes>
</Router>
</>
)
}
export default App
SO when I am in main page that works fine and I can reach that section when clicking the section like when i click on products i can reach on #products
After that when I click on /cart and /login page I can reach on that page but myNavbar is same for all pages so when I click on Products, it doesn't work
I have tried all the possibilities on changing the NavLink like I have changed #products to /#products but also It doesn't work
Is there any solution for that
I think you can do one of these two:
First You can change your navbar and when you go to a page like a login page or cart page , your navbar doesn't show the other option till the user get back to the home page.
Second is that you pass a variable when you click on those (home, collection, products, and contact). you will say okay go to the home page if I am not at the home page then you will check the state and if there was one of these variables (home, collection, products, and contact) you can navigate to them by using js.
pathname: '/somewhere',
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
basically, this is what you find when you use location hook.
for more information check out the website
react-router-dom "#location"
To navigate to a particular section of a particular page, you might want to use a HashLink in your Navbar component.
Installation:
npm i react-router-hash-link
Import it as:
import { HashLink } from 'react-router-hash-link';
And use it as:
<li><HashLink to={"/page#id"}>Contacts</HashLink></li>
You can learn more about the same here
Hope this helps!
Hello dear colleagues,
I have a question based on a project I'm doing in a course I'm rolled.
All of my code is practicaly build, the only thing that I'm with difficulties to implement is a button which I have to display and by clicking this button it'll take me to a search page. I've implemented the link, which appears as a hyperlink in the main page, but it'd be in place of this hyperlink the button.
My main page is displaying the hyperlink like this (note the hyperlink in the bottom of the page at the right side):
Main Page With Hyperlink
But, according to the project requirements, the main page would display the button like this (with functionallity to take me to the search page, as the hyperlink does):
Main Page With Button Displayed
Below I show to you part of the codes I've done for the components:
Part of App.js code:
The beggining of the code:
import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import Search from './Search';
import * as BooksAPI from './BooksAPI';
import './App.css';
class BooksApp extends React.Component {
state = {
books: []
}
The part with the Route:
render() {
return (
<div className="app">
<Route exact path="/" render={() => (
<Home
books={this.state.books}
changeShelf={this.changeShelf}
/>
)} />
<Route path="/search" render={() => (
<Search
changeShelf={this.changeShelf}
books={this.state.books}
/>
)} />
Part of main page code (Home.js):
The beggining of the code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
class Home extends Component {
The part which displays the link instead of the button:
<div className="open-search">
<Link to="/search">
Add a book
</Link>
</div>
So, I'd need some clarity here, what am I doing wrong in this code?
Please, if you'll need other code parts, please tell me that I put here, but I think these parts are enough for you to help me.
Regards.
You need to wrap your button in Link. See below.
<div className="open-search">
<Link to="/search">
<YourButtonComponent/>
</Link>
</div>
By doing this <YourButtonComponent/> is acting the same way that the text Add a Book does. It's wrapped in Link, so clicking on the <YourButtonComponent/> is the same as clicking the Link.
I am facing a issue with my react bootstrap code. Whenever I use Navbar component of react bootstrap, my computer gets hang and I had to force shutdown computer. I am not sure what exactly wrong with the code snippet below:
import React, { Component } from 'react';
import Nav from 'react-bootstrap/Nav';
import './navbar.css';
class Navbar extends Component {
render() {
return (
<div className="nav-container">
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Navbar>
</div>
)
}
}
export default Navbar;
Interesting thing is whenever I use plain html to render Navbar computer does not hang but when I had this react bootstrap Navbar, it hangs.
You defined a component called Navbar and you're calling it inside itself. Seems like that would create a vicious loop that will kill your App and by extension your computer performance.
Try renaming the component to something else or take out the Navbar jsx inside your render which doesnt seem necessary:
import React, { Component } from 'react';
import Nav from 'react-bootstrap/Nav';
import './navbar.css';
class Navbar extends Component {
render() {
return (
<div className="nav-container">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</div>
)
}
}
export default Navbar;
See working sandbox: https://codesandbox.io/s/shy-hooks-e6n81
This is a bit absurd. I've been testing components straight from the React-Bootstrap site and some fail while others succeed. Here's my code:
import * as React from "react";
import * as ReactDOM from "react-dom";
var Jumbotron = require('react-bootstrap/lib/Jumbotron');
var Button = require('react-bootstrap/lib/Button');
var Nav = require('react-bootstrap/lib/Navbar').Nav;
var NavItem = require('react-bootstrap/lib/Navbar').NavItem;
var NavDropdown = require('react-bootstrap/lib/Navbar').NavDropdown;
var Navbar = require('react-bootstrap/lib/Navbar');
var MenuItem = require('react-bootstrap/lib/Button').MenuItem;
export class App extends React.Component<any, any> {
constructor() {
super();
}
return (
<div>
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
This is literally copied straight from the Navbar example code with a wrapping div. It gives me 13 copies of React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofApp. error and one of Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofApp``.
However, if I try the Jumbotron demo code, it works fine; it renders the Jumbotron without any issues. Am I importing something wrong in the import statements? This is literally the simplest of examples, how can it be going so wrong?
This is due the reason that you Navbar.Header and any other item that you use with Navbar is undefined, however your Navbar is defined. This may be due to the reason that you babel is not properly resolving them
Try using you import differently as
import React from 'react';
import ReactDOM from 'react-dom';
import {Navbar, Nav, NavItem, NavDropdown, Button, Jumbotron, MenuItem} from 'react-bootstrap';
I think this should work for you.
OK, deleting my node-modules folder and reinstalling with npm i fixed that issue. Not sure what was wrong with my initial install, but wiping it seemed to work out, so hey, why not.