React Router无法使用JQuery动态生成的href链接

Question

Im new to React.js and im using jQuery in my react project to identify mouse and click event, based on that cloning the navigation <li> list of <a> tags and displaying in targeted div id, everything working fine, but clicking on the newly generated link loading the whole page rather than small part of the screen, i know newly cloned jquery code has href and but react wanted <Link> and here is my minified version of code to understand the problem

// minified code 
class Sidebar extends Component {


    componentDidMount() {

        $(".navigation").on("mouseenter click", ".navigation-menu > li", function() {
            generateLinks($(this))
        });


        function generateLinks(e) {
            var links = e.find("li");
            var generatedMenuLinks = links.clone().appendTo("#targetDiv");

            // rest of the code 
        }
    }


    render() {
        return(
            <div className="navigation">
                <ul className="navigation-menu">
                    <li class="menu1">
                        <Link to="/menu1/data1">Menu1Data1</Link>
                        <Link to="/menu1/data2">Menu1Data2</Link>
                        <Link to="/menu1/data3">Menu1Data3</Link>
                    </li>
                    <li class="menu2">
                        <Link to="/menu2/data1">Menu2Data1</Link>
                        <Link to="/menu2/data2">Menu2Data2</Link>
                        <Link to="/menu2/data3">Menu2Data3</Link>
                    </li>
                    <li class="menu3">
                        <Link to="/menu3/data1">Menu3Data1</Link>
                        <Link to="/menu3/data2">Menu3Data2</Link>
                        <Link to="/menu3/data3">Menu3Data3</Link>
                    </li>
                </ul>
            </div>
        );
    }

}

Thank you in advance

Answer 1

class Sidebar extends Component {

render() {
    return(
        <div className="navigation" onClick={() => {
            /*

            DO WHAT EVER YOU WANT HERE YOU CAN
            USE .map() ON AN ARRAY THAT HAS YOUR 
            DATA AND RETURN <li> WITH WHAT EVER YOU
            WANT. MAKE SURE TO USE CURLY BRACES 
            ANY WHERE YOU WANT TO INCLUDE JAVASCRIPT!
            */ 
        }}>
            <ul className="navigation-menu">
                <li class="menu1">
                    <Link to="/menu1/data1">Menu1Data1</Link>
                    <Link to="/menu1/data2">Menu1Data2</Link>
                    <Link to="/menu1/data3">Menu1Data3</Link>
                </li>
                <li class="menu2">
                    <Link to="/menu2/data1">Menu2Data1</Link>
                    <Link to="/menu2/data2">Menu2Data2</Link>
                    <Link to="/menu2/data3">Menu2Data3</Link>
                </li>
                <li class="menu3">
                    <Link to="/menu3/data1">Menu3Data1</Link>
                    <Link to="/menu3/data2">Menu3Data2</Link>
                    <Link to="/menu3/data3">Menu3Data3</Link>
                </li>
            </ul>
        </div>
    );
}

}

Try something like what I dropped in there. Read the comment in the arrow function. I hope that helps. Like Boy With Silver Wings said React doesn't play well with jQuery. It uses JSX. Suerte