React图标在点击时改变

Question

我怎么也想不明白。我希望下面的React图标填充和保持填充点击和更改回概述时，另一个被点击。下面是代码:

import { useState } from "react";
import { Link } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";
const FooterNav = () => {
return (
<div className="footer-nav-container">
<div className="footer-nav-icon">
<Link to="/">
<AiOutlineHome className="home-icon" />
<p>Home</p>
</Link>
</div>
<div className="footer-nav-icon">
<Link to="/past">
<BsCalendarCheck className="calendar-check-icon" />
<p>Past</p>
</Link>
</div>
<div className="footer-nav-icon">
<Link to="/upcoming">
<BsCalendarPlus className="calendar-plus-icon" />
<p>Upcoming</p>
</Link>
</div>
</div>
);
};
export default FooterNav;

我希望能得到一些帮助。谢谢你！

Answer 1

正如评论中提到的，

你可以使用react-router-dom中的useLocation钩子。这给你当前位置的详细信息。在此基础上，您可以决定加载哪个图标。

我还没有测试过，但是像这样的东西可以工作

import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";
const FooterNav = () => {
const location = useLocation();
console.log(location);
return (
<div className="footer-nav-container">
<div className="footer-nav-icon">
<Link to="/">
{location.pathname === "/" ? <AiFillHome className="home-icon" /> : <AiOutlineHome className="home-icon" />}
<p>Home</p>
</Link>
</div>
<div className="footer-nav-icon">
<Link to="/past">
{location.pathname === "/past" ? <BsCalendarCheckFill className="calendar-check-icon" /> : <BsCalendarCheck className="calendar-check-icon" />}
<p>Past</p>
</Link>
</div>
<div className="footer-nav-icon">
<Link to="/upcoming">
{location.pathname === "/upcoming" ? <BsCalendarPlusFill className="calendar-plus-icon" /> : <BsCalendarPlus className="calendar-plus-icon" /> }
<p>Upcoming</p>
</Link>
</div>
</div>
);
};
export default FooterNav;

Answer 2

useLocationhook from react-router是一个很好的开始。沿途尝试一些东西:

import { useLocation } from 'react-router-dom'
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";

const FooterNav = () => {
const location = useLocation()
const isLocationHome = location.pathname === '/'
return (
<div className="footer-nav-container">
<div className="footer-nav-icon">
<Link to="/">
{isLocationHome ? 
<AiFillHome /> :
<AiOutlineHome className="home-icon" />  
}
<p>Home</p>
</Link>
...
</div>
</div>
);
};

Answer 3

如上所述，您可以使用此沙盒https://codesandbox.io/s/modest-lehmann-qfm6uf?file=/src/styles.css

中所示的useLocation()钩子