Open Yvens16 opened 3 years ago
Still doesn't work for some reason.
@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 }
]}
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;
@austinbaccus why are you adding router and switch? Where is that mentioned in the example?
@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.
anyone provided a solution here? still broken
The details you have given are not enough, you do the following :