React-router 带箭头的页面

Question

I want to change menu-pages (in react-router) with to icons ("back", "forward")...

export const ArrowNav = () => {
    const menu = useContext(menuContext);

    return <div className="lmpixels-arrows-nav">
        <NavLink to={"/about"}>
            <div className="lmpixels-arrow-right">
                <i className="lnr lnr-chevron-right"/>
            </div>
        </NavLink>

        <NavLink to="/resume">
            <div className="lmpixels-arrow-left">
                <i className="lnr lnr-chevron-left"/>
            </div>
        </NavLink>
    </div>
}

Answer 1

Instead of using html css styles to show the icons you might like to try the package React Icons:

https://react-icons.github.io/

I, particularly, avoid using old CSS style names for icons like you are trying to do. In fact, I prefer to do all I can do to avoid the use of CSS files with React. Because React uses a lot js objects I believe it is better practice the use of some kind of CSS objects:

https://www.w3schools.com/react/react_css.asp

The error you are getting might depend on how are you importing the needed css information.

More info you might find useful:

https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900

Hope this will help you