When I import Bootstrap CSS it adds extra CSS to the navbar. As it is shown in the image below. I am using bootstrap cards in this code but not for Navbar. When I remove the Bootstrap CSS It works fine.
You can check the code here
Please help me resolve this.
if your problem is the under line you can omit that using
style={{ textDecoration: 'none' }}
here is your modified navbar.jsx file
// eslint-disable-next-line
import React from 'react';
import { NavLink } from 'react-router-dom';
function Navbar(){
return(
<>
<header className="l-header">
<div className="navi bd-grid">
<div>
<NavLink to="#" className="navi__logo">Portfolio</NavLink>
</div>
<div className="navi__menu" id="navi-menu">
<ul className="navi__list">
<li className="navi__item">
<NavLink to="#home" className="navi__link menu" style={{ textDecoration: 'none' }}>Home</NavLink>
</li>
<li className="navi__item">
<NavLink to="#about" className="navi__link" style={{ textDecoration: 'none' }}>About</NavLink>
</li>
<li className="navi__item">
<NavLink to="#skills" className="navi__link" style={{ textDecoration: 'none' }}>Skills</NavLink>
</li>
<li className="navi__item">
<NavLink to="#work" className="navi__link" style={{ textDecoration: 'none' }}>Work</NavLink>
</li>
<li className="navi__item">
<NavLink to="#contact" className="navi__link" style={{ textDecoration: 'none' }}>Contact</NavLink>
</li>
</ul>
</div>
<div className="navi__toggle" id="navi-toggle">
<i className='bx bx-menu'></i>
</div>
</div>
</header>
</>
);
};
export default Navbar;
output will be something like this
Try to import the bootstrap on your index.js file and it should solve the problem.
Related
There are many similar problems, but I can't solve this background error warning. Strictly speaking, I'm still a novice. I know to change li, but I don't know where to start. Please help me. This error warning:
next-dev.js?3515:20 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
at li
at li
at ul
at div
at div
at Top (webpack-internal:///./components/header/Top.js:28:84)
at header
at Header (webpack-internal:///./components/header/index.js:18:11)
at div
at Home
at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.js:22:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)
I hope something can help me correct him. Like obsessive-compulsive disorder, I can't face the red color of the back. This is my original code:
import styles from "./styles.module.scss";
import { MdSecurity } from "react-icons/md";
import { BsSuitHeart } from "react-icons/bs";
import { RiAccountPinCircleLine, RiArrowDropDownFill } from "react-icons/ri";
import Link from "next/link";
import { useState } from "react";
import UserMenu from "./UserMenu";
export default function Top() {
const [ loggedIn, setLoggedIn ] = useState(true);
const [visible, setVisible] = useState(false);
return (
<div className={styles.top}>
<div className={styles.top_container}>
<div></div>
<ul className={styles.top_list}>
<li className={styles.li}>
<MdSecurity />
<span>Buyer Prodtection</span>
</li>
<li className={styles.li}>
<span>Customer Service</span>
</li>
<li className={styles.li}>
<span>Help</span>
</li>
<li className={styles.li}>
<BsSuitHeart />
<Link href={"/profile/whishlist"}>
<span>Whishlist</span>
</Link>
</li>
<li
className={styles.li}
onMouseOver={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
{loggedIn ? (
<li className={styles.li}>
<div className={styles.flex}>
<img
src={"/"}
width={22}
height={22}
alt=''
/>
<RiArrowDropDownFill />
</div>
</li>
) : (
<li className={styles.li}>
<div className={styles.flex}>
<RiAccountPinCircleLine />
<span>Account</span>
<RiArrowDropDownFill />
</div>
</li>
)}
{visible && <UserMenu loggedIn={loggedIn} />}
</li>
</ul>
</div>
</div>
);
}
You cannot nest li tags in html.
For example
<ul>
<li>
<li></li>
</li>
</ul>
If you would like a nested list, you can do this
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I would like all the elements nested inside of the first Nav tag to be on the left side of the NavBar, and all in the second Nav tag to float right. How can I achieve this using react Bootstrap?
I tried doing Nav className="float-right" on the second Nav tag but it didn't work. I also tried className="ml-auto".
<Nav>
<Nav.Link>
{" "}
<Link
to="/booklets"
className="nav-link"
onClick={() => setExpanded(false)}
>
Booklets
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/form"
className="nav-link"
onClick={() => setExpanded(false)}
>
Upload New Booklet
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/about"
className="nav-link"
onClick={() => setExpanded(false)}
>
About
</Link>
</Nav.Link>
</Nav>
<Nav>
<Nav.Link>
{" "}
<Link
to="/login"
className="nav-link"
onClick={() => {
setExpanded(false);
currentUser && logout();
}}
>
{currentUser ? "Logout" : "Login"}
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/register"
className="nav-link"
onClick={() => setExpanded(false)}
>
{!currentUser ? "Register" : ""}
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Assuming that the direct parent of the two <Nav> is <Navbar.Collapse>, perhaps try style the parent to have it place the items each on one side, with flex display.
Example with Bootstrap classes:
<Navbar.Collapse className="d-flex justify-content-between">
Example with inline styles:
<Navbar.Collapse style={{ display: 'flex', justifyContent: 'space-between' }}>
I'm using #tanstack/react-location in React Typescript project + 'react-redux'.
When I change redux auth state (login, logout) I also make my MainNavigation changing. Some Links are added or removed. And when it happens the router stops working.
Updated Links are working, url is changing, but Router isn't responding.
After refresh Router works again.
App.tsx
...
<Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
MainNavigation.tsx
<header className="header">
<Link to="/" getActiveProps={getActiveProps}>
<div className="logo">RS Lang</div>
</Link>
<nav>
<ul>
<li>
<Link to="/" getActiveProps={getActiveProps}>
Home
</Link>
</li>
<li>
<Link to="/team" getActiveProps={getActiveProps}>
Team{' '}
</Link>
</li>
<li>
<Link to="/textbook" getActiveProps={getActiveProps}>
Textbook
</Link>
</li>
{isLoggedIn && (
<li>
<Link to="/dictionary" getActiveProps={getActiveProps}>
Dictionary
</Link>
</li>
)}
<li>
<Link to="/games" getActiveProps={getActiveProps}>
Games
</Link>
</li>
{!isLoggedIn && (
<li>
<Link to="/auth" getActiveProps={getActiveProps}>
Login|SignUp
</Link>
</li>
)}
{isLoggedIn && (
<li>
<Link to="/profile" getActiveProps={getActiveProps}>
Profile {authState.user.name}
</Link>
</li>
)}
{isLoggedIn && (
<li>
<button type="button" onClick={logoutHandler}>
Logout
</button>
</li>
)}
</ul>
</nav>
</header>
for me the issue was that the definition of the ReactLocation was not in the main.tsx. So I fixed it like so:
main.tsx
export const reactLocation = new ReactLocation();
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
App.tsx
import { reactLocation} from './main.tsx';
export const App = () => {
return <Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
}
Hope that helps :)
(I was using vite as build tool)
I have install bootstrap and import import 'bootstrap/dist/css/bootstrap.css' in my _app.js
But after creating the tabs it does not work can someone help please?
Here is the tab code
import Link from 'next/link'
const NavigationTabs = () => {
return (
<>
<nav>
<div
className='nav nav-tabs mb-3 justify-content-center'
id='tabContentList'
role='tablist'
>
<Link href='#login' className='nav-item'>
<a
className='nav-link active'
id='nav-login-tab'
role='tab'
data-bs-toggle='tab'
data-bs-target='#login'
aria-controls='login'
aria-selected='true'
>
Login
</a>
</Link>
<Link href='#register' className='nav-item'>
<a
className='nav-link active'
id='nav-register-tab'
data-bs-toggle='tab'
data-bs-target='#register'
role='tab'
aria-controls='register'
aria-selected='false'
>
Register
</a>
</Link>
</div>
</nav>
<div className='tab-content' id='nav-tabContent'>
<div
className='tab-pane fade show active'
id='login'
role='tabpanel'
aria-labelledby='nav-login-tab'
>
Tab 1 content
</div>
<div
className='tab-pane fade'
id='register'
role='tabpanel'
aria-labelledby='nav-register-tab'
>
Tab 2 content
</div>
</div>
</>
)
}
export default NavigationTabs
Is there a better way to create it in bootstrap 5 or should I add the script tag from bootstrap?
My First problem is that, I have three links in menu. Home, About and Add Food. NavLink activeClassName works as expected , except for this : Home always stays active, even when i move to other links.
In the screenshot, i've moved to /about page, but Home *li stays active.
Secondly, for some reason, border radius doesn't work on these items. Is it because they have substantial padding?
my code :
import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = (props) => {
return (
<nav>
<ul>
<NavLink to="/" activeClassName="active-navlink">
<li>Home</li>
</NavLink>
<NavLink to="/about" activeClassName="active-navlink">
<li>About</li>
</NavLink>
<NavLink to="/add-food" activeClassName="active-navlink">
<li>Add Food</li>
</NavLink>{" "}
</ul>
</nav>
);
};
export default Navbar;
and my Router, where all the links are handled :
<Router>
{" "}
<div className="App">
<Navbar></Navbar>
<Switch>
<Route path="/about" component={About}></Route>
<Route
path="/products/:food"
render={(props) => (
<IndividualProduct {...props}></IndividualProduct>
)}
></Route>
<Route
path="/"
exact
render={(props) => (
<Home
{...props}
groceryList={groceryList}
orderTotal={orderTotal}
setOrderTotal={setOrderTotal}
productsInCart={productsInCart}
updateProductsInCart={updateProductsInCart}
></Home>
)}
></Route>
<Route component={NotFound}></Route>
</Switch>
</div>
</Router>
1.
Add exact to Navlink of '/':
<NavLink to="/" activeClassName="active-navlink" exact={true} >
<li>Home</li>
</NavLink>
Styling sample:
https://codepen.io/k3no/pen/OXgXOb