React navbar links do not work but no errors in terminal.console. Please help!

JavaScript
1

This is my first time creating a Navbar in React.

Although the Navbar shows in the output… The links do not take me to the pages as required.

I am using react-router-dom@5.3.0. and the latest react-bootstrap.

Can someone please have a look?

This is my code:



import { Navbar, Container, Nav } from "react-bootstrap";
import {
BrowserRouter as Router,

  Link,
} from "react-router-dom";

import icon from "../Icons/Icon.png";
import filtericon from "../Icons/Filtericon.png";
import logo from "../logo/Logo.png";
import button from "../images/login-btn.png";
import SearchBar from "./Search";
import "./navbar.css";

export default class Navbarbefore extends Component {
  render() {
    return (
      <Router>
        <div className="nav-container">
          <Navbar
            collapseOnSelect
            expand="lg"
            bg=".bg-transparent"
            variant="dark"
            className="gap-3 px-3"
          >
            <Container>
              <Navbar.Brand href="/">
                <img className="main-logo" src={logo} alt="logo" />
              </Navbar.Brand>
              <Navbar.Toggle aria-controls="navbarScroll" />
              <Navbar.Collapse id="navbarScroll">
                <Nav className="me-auto flex-grow-1">
                  <div className="ml-70">
                    <SearchBar />
                  </div>
                  <Nav.Link as={Link} href="/home">
                    {" "}
                    <img
                      className="filter"
                      src={filtericon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                  <Nav.Link as={Link} activeKey="/reviews">
                    {" "}
                    <div className="mr-60 ml-74 review"> Review </div>
                  </Nav.Link>
                  <Nav.Link as={Link} activeKey="/community">
                    {" "}
                    <div className="mr-74 community">Community</div>
                  </Nav.Link>
                  <Nav.Link activeKey="#">
                    {" "}
                    <img
                      className="ml-74 notification"
                      src={icon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                </Nav>
                <Nav>
                  <Nav.Link as={Link} activeKey="/login">
                    <img className="ml-74" src={button} alt="log in button" />
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </div>
      </Router>
    );
  }
}

This is my code for the my app js:



import Home from "./Pages/homepage/Home";
import Reviews from "./Pages/Reviews";
import Community from "./Pages/Community";
import Login from "./Pages/login/Login";
import Navbarbefore from "./Navbar/Navbarbefore";
import Footer from "./footer/footer-main";

import './App.css';

function App() {
  return (
    <div className="App">
      <Navbarbefore />
      <Home />
      <div>
        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/reviews">
            <Reviews />
          </Route>
          <Route path="/community">
            <Community />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
        </Switch>
      </div>
      <Footer />
    </div>
  );
}
export default App;

hope you can help me to find a solution :slight_smile:

thanks :slight_smile:

2

Hello @hmaryan86 !

I see two possible problems with your code:

  • The NavBar component holds the router. The router should be higher on the hierarchy, in the App.js, so the router “can see” the hole aplication.
  • The second one is a bit more complicated, I will try to explain myself the best I can :slight_smile::
    • You are using <Nav.Link as={Link} href="/home">. This is, as far as I know, for using Nav.Link functionality but using other component “behind the scenes”. So the props you are passing to Nav.Link, will end up in the Link component.
    • With that in mind, if you pass down an href, wich is a totally fine attribute for anchors, But React Router Link has nothing to do with that. That component is expecting a prop called “to”.

When using props like as or Component, libraries used to do something like following:

const ExampleComponent = ({propA, ...ComponentProps}) => (
<Parent propA={propA}>
  <Component {...componentProps}/>
</Parent>)

So, if you see a prop like that, think that you are actually using the component you specified, not the parent.

Please let me know if I dind’t explain myself correctly, or if you still have some doubts!

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.