CODEWITHSUNDEEP
javascriptreactjsreact-routernavbar
Çağatay Sert
Çağatay Sert

Reputation: 423

How can I use Navbar link in Reactjs?

I am trying to create a website by using Reactjs. I tried to create Navbar and on navbar, I created 2 links which are Home and Contact. When I click for example contact button, I can see the end-point on URL but on the page, nothing happens. I have already created Routes and Links but I really did not understand why I can not use Navbar's links. May you help me, please? Thank you in advance.

import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";

const Navbar = () => {
     return (
        <BrowserRouter>
            <nav>
                <ul>
                    <li><Link to='/'>Sağlık Hizmetim</Link></li>
                    <li><Link to='/contact'>İletişim</Link></li>
                </ul>
            </nav>
        </BrowserRouter>
        );
 };

 Navbar.propTypes = {};

 export default Navbar;

It was my Navbar component.

import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';

const Routes = () => {
     return (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/contact' component={Contact}/>
        </Switch>
    </BrowserRouter>
);
 };

 export default Routes;

It was my Route component. Also, I have called route and navbar component in App.js.

Upvotes: 2

Views: 19735

Answers (4)

Ha Huu Tin
Ha Huu Tin

Reputation: 334

In Navbar component, just remove <BrowserRouter>

Navbar component:

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to='/'>Sağlık Hizmetim</Link></li>
        <li><Link to='/contact'>İletişim</Link></li>
      </ul>
    </nav>
  );
};

Navbar.propTypes = {};

export default Navbar;

Routes component:

import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';
import Navbar from './Navbar';

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
        <Navbar />
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/contact' component={Contact}/>
        </Switch>
      </div>     
    </BrowserRouter>
  );
};

export default Routes;

Hope this help!

Upvotes: 0

Dennis Wanjiru
Dennis Wanjiru

Reputation: 96

You should only have one instance of <BrowserRouter /> in your application. Remove the one from <Navbar /> and replace all the links with <NavLink /> as follows;

import React from "react";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Sağlık Hizmetim</NavLink>
        </li>
        <li>
          <NavLink to="/contact">İletişim</NavLink>
        </li>
      </ul>
    </nav>
  );
};

Navbar.propTypes = {};

export default Navbar;

Upvotes: 1

Vijesh
Vijesh

Reputation: 815

You should use one only one instance of Router in an App. Remove the BrowserRouter from Navbar Component and try:

import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";

const Navbar = () => {
 return (
        <nav>
            <ul>
                <li><Link to='/'>Sağlık Hizmetim</Link></li>
                <li><Link to='/contact'>İletişim</Link></li>
            </ul>
        </nav>
    );
};

Navbar.propTypes = {};

export default Navbar;

Upvotes: 3

Chiragkumar Maniar
Chiragkumar Maniar

Reputation: 32

Try to put below :

<a routerLink="/contact" routerLinkActive="active">{{Your data}}</a>

Upvotes: 0

Related Questions