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

[sloorush]

No description provided.

[Nazeh-Taha]

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

[ILoomans]

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]

yep same

[Nazeh-Taha]

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

[sloorush]

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

[Nazeh-Taha]

Can I see the repo or the code

[ZachPfeifer]

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]

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]

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]

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";
<Router> <Route exact path="/" component={Home} /> <Route path="/store" component={Store} /> <Route path="/store/:payload" component={SingleProduct} /> <Route path="/about" component={AboutUs} /> <Route path="/cart" component={Cart} /> <Route component={Error} /> </Router>

[JevF1982]

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

[Nazeh-Taha]

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]

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

[ghost]

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

[hernandez87v]

Really nice Navbar but having the same issue with react-router-dom
<Router> <div className="App"> <Navbar /> <Route path="/" exact component={Twitch} /> <Route path="/Twitch" exact component={Twitch} /> <Route path="/Soundcloud" exact component={Soundcloud} /> <Route path="/Mixcloud" exact component={Mixcloud} /> </div> </Router>

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

[dawood6]

Same Issue Again Any Help

[dawood6]

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]

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

[christorepl]

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]

i have the same problem

[lorstenoplo]

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

[pr7prashant]

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

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

[lorstenoplo]

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

[pr7prashant]

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]

@pr7prashant yeah you can

[karlaluuu]

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

[lorstenoplo]

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

[karlaluuu]

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

[lorstenoplo]

@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]

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

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

[karlaluuu]

@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? :(