Nazeh-Taha / react-responsive-animate-navbar

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

Still same issue with the navigation, the screen doesn't update on changing route #28

Open Yvens16 opened 3 years ago

lorstenoplo commented 3 years ago

The details you have given are not enough, you do the following :

  1. Please include version you're using
  2. Try providing an example like codesandbox with the issue reproduced
austinbaccus commented 3 years ago
  1. I don't know which version I have exactly, but I just installed this via npm yesterday
  2. I directly copy and pasted the code from the updated example (which passes in the components to the menu property)

Still doesn't work for some reason.

lorstenoplo commented 3 years ago

@austinbaccus you are doing it wrong as you have not followed the example properly,

Wrong method : menu={[ { name: "HOME", to: "/", component: {Feed} }, { name: "ABOUT ME", to: "/about", component: {About} }, { name: "CONTACT", to: "/contact", component: {Contact} }, ]}

You shouldn't pass the component inside an object instead pass it directly, like this :

menu={[ { name: "HOME", to: "/", component: Feed },
 { name: "ABOUT ME", to: "/about", component: About },
 { name: "CONTACT", to: "/contact", component: Contact }
]}
austinbaccus commented 3 years ago

Ah, gotcha. I changed my code to be exactly that but it's still not working. Not sure what's wrong, the syntax looks correct.

// what I have now
menu={[
  { name: "HOME", to: "/", component: Feed },
  { name: "ARTICLES", to: "/articles", component: Articles },
  { name: "ABOUT ME", to: "/about", component: About },
  { name: "CONTACT", to: "/contact", component: Contact }
]}

Here's my full code for App.js:

import './App.css';
import Feed from "./pages/Feed";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Nav from "./pages/Nav";
import React from "react";
import { ReactNavbar } from "react-responsive-animate-navbar";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Link } from 'react-router-dom';

function App() {
    const Articles = () => <h1>Articles</h1>;

    return (
      <Router>
        <div >
          <ReactNavbar
            color="rgb(25, 25, 25)"
            logo="https://gist.githubusercontent.com/austinbaccus/ee931b1be55ccd547d706fcc62964227/raw/337fcfd92a49c31b326e70e982df199412267afa/austigram.svg"
            menu={[
              { name: "HOME", to: "/", component: Feed },
              { name: "ARTICLES", to: "/articles", component: Articles },
              { name: "ABOUT ME", to: "/about", component: About },
              { name: "CONTACT", to: "/contact", component: Contact }
            ]}
            social={[
              {
                  name: "Linkedin",
                  url: "https://www.linkedin.com/in/austin-baccus-8a06b9b2/",
                  icon: ["fab", "linkedin-in"]
              },
              {
                  name: "Facebook",
                  url: "https://www.facebook.com/austin.baccus.9/",
                  icon: ["fab", "facebook-f"]
              },
              {
                  name: "Instagram",
                  url: "https://www.instagram.com/austin_baccus/",
                  icon: ["fab", "instagram"]
              },
              {
                  name: "Twitter",
                  url: "https://twitter.com/austinb243",
                  icon: ["fab", "twitter"]
              }
            ]}
          />
          <Switch>
            <Route path="/" exact component={Feed}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/about" component={About}/>
          </Switch>
        </div>
      </Router>
    )
}

export default App;
lorstenoplo commented 3 years ago

@austinbaccus why are you adding router and switch? Where is that mentioned in the example?

ZanQ commented 2 years ago

@lorstenoplo

https://codesandbox.io/s/cool-monad-8e05s?file=/src/App.js

I'm having the same problem, copy and pasted from example, but menu doesn't navigate.

stefanopedicinogit commented 1 year ago

anyone provided a solution here? still broken