search

Nazeh-Taha / react-responsive-animate-navbar

React js Library - Responsive Animated Navbar
86 stars 27 forks source link

Router changes url link but not the view when using react router dom #4

Open sloorush opened 4 years ago

Nazeh-Taha commented 4 years ago

I think this article will help you. https://codeburst.io/getting-started-with-react-router-5c978f70df91

ILoomans commented 4 years ago

I love the design for the navbar but I am having the same issue, i had a working navigation bar, once i replaced it with this one i had the same issue that the url link changes but the view doesn't.

sloorush commented 4 years ago

yep same

Nazeh-Taha commented 4 years ago

Thanks for contacting me. I want to ask if you used "react-router-dom" in your project.

sloorush commented 4 years ago

yes, this package https://www.npmjs.com/package/react-router-dom

Nazeh-Taha commented 4 years ago

Can I see the repo or the code

ZachPfeifer commented 4 years ago

Did this issue get resolved? I have the same problem where it will change the URL but not the view. My original Router Links work just fine but the navbar isn't working. I'll link my repo but you won't be able to clone and host without my keys.

Repo: -https://github.com/ZachPfeifer/silver-spirit-alchemy/blob/master/client/src/components/NavBar/Navbar4.js

Nazeh-Taha commented 4 years ago

Did this issue get resolved? I have the same problem where it will change the URL but not the view. My original Router Links work just fine but the navbar isn't working. I'll link my repo but you won't be able to clone and host without my keys.

Repo: -https://github.com/ZachPfeifer/silver-spirit-alchemy/blob/master/client/src/components/NavBar/Navbar4.js

ok try this: import the react-router like this: import { BrowserRouter as Router, Route } from "react-router-dom"; then but this:

......

and remove all (exact) from all routes except home route.

Nazeh-Taha commented 4 years ago

Did this issue get resolved? I have the same problem where it will change the URL but not the view. My original Router Links work just fine but the navbar isn't working. I'll link my repo but you won't be able to clone and host without my keys. Repo: -https://github.com/ZachPfeifer/silver-spirit-alchemy/blob/master/client/src/components/NavBar/Navbar4.js

ok try this: import the react-router like this: import { BrowserRouter as Router, Route } from "react-router-dom"; then but this:

...... and remove all (exact) from all routes except home route.

    <Router>
      <Route path="/" component={Home} exact />
      <Route path="/about" component={AboutUs} />
      <Route path="/cart" component={Cart}/>
    </Router>
ZachPfeifer commented 4 years ago

The issue persists and I only have problems with the navbar. I have buttons that work just fine using the react-router-dom .

Here is the condensed version of my App.js:

import React from 'react'; import { BrowserRouter as Router, Route } from "react-router-dom"; `

`

JevF1982 commented 4 years ago

Very nice navbar , but I have indeed the same problem with react-router...

Nazeh-Taha commented 4 years ago

Hi guys, sorry if there is a problem in the navbar just give me two days and I will fix it. thanks a lot for using this package and thanks for contacting me. I will tell you when I finish fixing it.

umar834 commented 4 years ago

Loved the design but facing the same issue.. :(

ghost commented 4 years ago

I created a PR that resolved this issue for me on mobile devices.

hernandez87v commented 4 years ago

Really nice Navbar but having the same issue with react-router-dom ` 

</Router>`

On a side note anyway to just have text instead of a logo?

dawood6 commented 4 years ago

Same Issue Again Any Help

dawood6 commented 4 years ago

Hi guys, sorry if there is a problem in the navbar just give me two days and I will fix it. thanks a lot for using this package and thanks for contacting me. I will tell you when I finish fixing it.

bro I like the design but not using it because of navigation issue

danielro8 commented 4 years ago

Yes, I have the same problem. A pity because it's an awesome design.

christorepl commented 3 years ago

the pull request didn't seem to change anything, neither did the advice given by the owner. such a shame, it's a really simple navbar to setup. i hope to see it fixed soon!

mohanor commented 3 years ago

i have the same problem

lorstenoplo commented 3 years ago

I have fixed the page change bug in PR : #21

pr7prashant commented 3 years ago

I have fixed the page change bug in PR : #21

@Nazeh-Taha are you planning to publish this to the NPM registry soon ?

lorstenoplo commented 3 years ago

@pr7prashant It should not happen yet I guess, because there are some small css positioning issues of the navbar and gsap related issues

pr7prashant commented 3 years ago

Thanks @lorstenoplo I also noticed that the navbar is not sticky on top for mobile devices. Can I create a feature request for this ?

lorstenoplo commented 3 years ago

@pr7prashant yeah you can

karlaluuu commented 3 years ago

has anyone made it work? i added the component, as well as the route under. still not working

lorstenoplo commented 3 years ago

@karlaluuu Did you install the package using npm or yarn from the registry

karlaluuu commented 3 years ago

@lorstenoplo did use npm. i'll try reinstalling the package and see

lorstenoplo commented 3 years ago

@karlaluuu Don't there is no use because he ( @Nazeh-Taha ) hasn't published the latest version to the npm registry.

You can either wait for the latest release or Clone this repository instead ( #23 actually ) then :

  1. Run npm install in the right directory
  2. Run npm run build
  3. Copy the dist folder generated by the build command
  4. Now go to the directory where your project is located
  5. Navigate to node_modules > react-responsive-animate-navbar then replace the existing dist folder with the newly generated one
karlaluuu commented 3 years ago

hey, sorry for the late response. thank you, @lorstenoplo! made it work!

anyways, very good design as well. kudos!!!!

karlaluuu commented 3 years ago

@karlaluuu Don't there is no use because he ( @Nazeh-Taha ) hasn't published the latest version to the npm registry.

You can either wait for the latest release or Clone this repository instead ( #23 actually ) then :

  1. Run npm install in the right directory
  2. Run npm run build
  3. Copy the dist folder generated by the build command
  4. Now go to the directory where your project is located
  5. Navigate to node_modules > react-responsive-animate-navbar then replace the existing dist folder with the newly generated one

question. is there any timeline to get the latest version out in the npm registry? just realized that this method works locally, but not being catched by my site deployed in a web hosting company. anyone using netlify to host their site and made it work? :(