JekaHC2022-04-21 22:09:26
JekaHC, 2022-04-21 22:09:26

How to change style of selected React-router link?

I have NavBar.jsx:

import React from "react";
import { Link } from "react-router-dom";

import "./navBar.sass";

function NavBar() {
  return (
    <div className="NavBar_container">
      <nav className="NavBar">
        <Link to="/CreateReview" className="NavBar_item">
          <div className="NavBar_img">
            <img src="./create_review_icon.png" alt="create_review" />
          <p className="NavBar_title">Create Review</p>
        <Link to="/Hotels" className="NavBar_item">
          <div className="NavBar_img">
            <img src="./main_page_icon.png" alt="main_page" />
          <p className="NavBar_title">Reviews</p>
        <Link to="/MyAccount" className="NavBar_item">
          <div className="NavBar_img">
            <img src="./my_account_icon.png" alt="my_account" />
          <p className="NavBar_title">My account</p>

export default NavBar;

I know that you can add a class to the selected link to change its styles using jQuery , but I understand that this is React) Tell me what React chips can I use to change the selected link?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Kirill Makarov, 2022-04-22

Import from react router home
And for checking there is className={({isActive}) => isActive ? "classforactivelink": "anotherclass"} like

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question