I am using UIkit css framework with Gatsby.js
When I use OffCanvas (Nav) to go to different page next page reloads but it stucks. nothing is happening not even scroll.
This is my SideBar.jsx file
I have hosted the partial built website.You can check the problem. Go to
https://jainsons.netlify.app/aboutus
then open Sidebar and then click "Home"
import React from 'react'
import {Link} from 'gatsby'
import logo from "../images/logo.png"
import UIkit from 'uikit/dist/js/uikit.min.js'
import Icons from 'uikit/dist/js/uikit-icons.js'
function SideBar() {
UIkit.use(Icons)
return (
<React.Fragment>
<div className="uk-position-absolute">
<button
className="uk-button uk-button-small uk-button-secondary uk-margin-small-left " style={{marginTop:"27px"}} type="button" uk-toggle="target: #offcanvas-nav-primary">
<span className="" uk-icon="icon:menu;ratio:2"></span>
</button>
</div>
<div id="offcanvas-nav-primary" uk-offcanvas="mode:reveal;overlay: true">
<div className="uk-offcanvas-bar uk-flex uk-flex-column">
<ul className="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
<li className=" uk-margin-xlarge-bottom">
<Link to="/" >
<img src={logo} alt="LOGO"/>
</Link>
</li>
<li>
<Link to="/" className="uk-text-lead" activeClassName="uk-active" >
Home
</Link>
</li>
<li className="uk-nav-divider"></li>
<li className="uk-parent">
<p className="uk-text-lead">Brands</p>
<ul className="uk-nav-sub">
<li><p>RAPCA</p></li>
<li><p>POLYX</p></li>
</ul>
</li>
<li className="uk-nav-divider"></li>
<li>
<Link to="/about" className="uk-text-lead" activeClassName="uk-active" >
Home
</Link>
</li>
</ul>
</div>
</div>
</React.Fragment>
)
}
export default SideBar
I don't think it'll be to do with Gatsby Link necessarily. Maybe try switching <Link to="/"> to a regular <a href="/"> tag to see if the behaviour is the same. From looking in the dev tools on Chrome, I can see that the event listener for the menu icon click disappears after a link from within the nav has been clicked.
Related
I have this bootstrap NavBar that works perfectly with "a", but when I try to replace the "a" with "Link" from React it pretty much breaks the app, the Navbar stops showing. Is it because of the Bootstrap? I saw a video from youtube that this works, maybe with newer versions this doesn't work?
import React from "react";
import { Link } from "react-router-dom";
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div>
<img width="100" src="/assets/images/logo.jpg"></img>
</div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/">Home</Link> <----------------here for ex.
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Productos
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Nosotros
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Contacto
</a>
</li>
</ul>
</div>
</div>
</nav>
Judging from the href attribute in your <a> components, I believe you are trying to access a component on the same page using hashes.
Link from react-router-dom does not actually support this feature from what I know. Instead, I suggest installing react-router-hash-link which supports it.
The import can look like
import { HashLink as Link } from 'react-router-hash-link';
And you can have the same component attributes
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/#productos">
Productos
</Link>
</li>
You need to enclose your <NavLink/>, <Link/>, <Routes/> and <Route/> components with a Router like <BrowserRouter/>.
So in App.js or another top level component, you need to do it like this:
const App = (props) => {
<BrowserRouter>
<Your sidebar component including NavLink elements/>
<Your app module including Route elements/>
</BrowserRouter>
}
Please I am working on a nextjs project. On mobile view my navigation uses a modal to toggle the navbar, but when I click on navigaton link only the data gets dismissed but the link doesn't navigate.
<Link href="/market">
<a className="nav-link" data-dismiss="modal">
<span className="lay-outstyle">Market</span>
</a>
</Link>
<Link href="/market">
<a className="nav-link" data-dismiss="modal">
<span className="lay-outstyle">Market</span>
</a>
</Link>
Bind Link like this
<Link to="/market">
<a className="nav-link" data-dismiss="modal">
<span className="lay-outstyle">Market</span>
</a>
</Link>
So this is how I fixed the issue. I used nextjs router (next/router) in an onClick function as shown below. Remember next js stores cache of route temporarily for fast access when you use the Link tag (same as react router)
<Link href="/market">
<a className="nav-link" onClick={() => router.push("/market")}>
<span className="lay-outstyle">Members</span>
</a>
</Link>
Updated, now the problem i'm seeing the navbar with format problems, shouldn't it be taking the CSS properties from bootstrap?
I Commited the project to make it easier: https://github.com/damianaguilarcogan/pfi_front_v4
Image: https://ibb.co/fdFTb4C
i just created a project but the navbar it's not loading, for sure it's a silly mistake but i'm not beeing able to find it.
I created the project, imported bootstrap in the index.html trought css links.
I created the folder components and inside ir navbar.js.
Afterwards I selected a common template from bootstrap navbar and Finally y called it from my app.js.
I don't get to see whats wrong, it should have already worked with this steps.
app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import navbar from './components/navbar';
function App() {
return (
<div className="App">
<navbar />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
navbar.js
import React from 'react';
class navbar extends React.Component {
render() {
return (
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search"></input>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
}
export default navbar;
[1]: https://i.stack.imgur.com/zk8Lf.png
React expects components to be named with an uppercase. Try renaming the navbar to Navbar.
class Navbar extends React.Component
<Navbar/>
Changing your navbar to Navbar works. In addition there is a bootstrap wrapper for React that can be useful if you are just starting now. https://react-bootstrap.github.io/
I'm trying to put a dropdown menu in my navbar. I'm using the materialize framework, and so far this is the only materialize javascript element I can't get to work. Here's the code I am using for the navbar:
import React, { Component } from "react";
import M, { Dropdown } from "materialize-css";
class Navbar extends Component {
componentDidMount() {
M.Dropdown.init(this.Dropdown);
}
render() {
return (
<div className="navbar-fixed">
<nav>
<div class="nav-wrapper purple">
<a href="/" class="brand-logo">
Logo
</a>
<a class="dropdown-trigger btn right" data-target="dropdown1">
Drop Me!
</a>
<ul
id="dropdown1"
class="dropdown-content"
ref={Dropdown => {
this.Dropdown = Dropdown;
}}
>
<li>
one
</li>
<li>
two
</li>
<li class="divider" tabindex="-1" />
<li>
three
</li>
<li>
<a href="#!">
<i class="material-icons">view_module</i>four
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">cloud</i>five
</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Navbar;
Essentially I click the element and nothing happens. Not sure what I'm doing wrong, and I can't find anything similar on Stack overflow. Here's the code sandbox... https://codesandbox.io/s/dawn-snow-3cmdv
Thanks!
I have a reactJS application where I provide a bootstrap menu to navigate the application. In my home page, this is the code of the menu that provides the user the link to log out:
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li class="active">Logout</li>
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Basic Account Information</a>
</li>
</ul>
</div>
When the user clicks on the Logout link, the application will route to preventback. This is the code in preventback.js:
import React from 'react';
class preventback extends React.Component {
componentWillMount() {
location.href="/logout";
}
render() {
return (
<div>
</div>
);
}
}
export default preventback
And this is the code in my logout.js:
import React from 'react';
import '../styles/app.css';
class logout extends React.Component {
render() {
return (
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#"> </a>
</nav>
<div className="container">
<div className="row">
<div className="col-12 text-center">
<p className="h4">You have been logged out</p>
<br /><br /><br />
<div className="text-center py-4 mt-3">
<button type="button" className="btn btn-primary"
onClick={() => {
location.href = ('/')
}}>
Log In
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default logout
All this code works as expected. When I click on the logout link, I get directed to preventback and then preventback directs me to logout.
My issue is that when I click on the browser back button, the browser takes me from the logout page to my home page. I had anticipated it taking me from the logout page to the preventback page. Then, when the preventback page loads, it would automatically route back to the logout page.
What am I not understanding?
Thanks.