0

I'm trying to rebuild my portfolio with React, I want to create a simple link in projects Component when the user clicks on an Icon and I want to open another page, I've tried to use React router but it not working?

<--Home Component-->

import React from 'react';
import './Home.css';
import Navbar from '../Navbar/Navbar';
import Header from '../Header/Header';
import Featured from '../Featured/Featured';
import useLocoScroll from '../Hooks/LocomotiveScroll';
import About from "../About/About";
import Projects from "../Mywork/Projects"
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = () => {

    useLocoScroll();

    return (
        <div className="main-container" id="main-container"
         data-scroll-container >
            <Router>
                <Routes>
                    <Route to="/" element={Navbar}/>
                    <Route to="/" element={Header}/>
                    <Route to="/" element={Featured}/>
                    <Route to="/" element={About}/>
                    <Route to="/" element={Projects}/>
                </Routes>
            </Router>
        </div>
    )
}


export default Home;

<-- Single Project-->

import React,{useState} from 'react';
import './Projects.css';
import {Visibility, GitHub } from "@material-ui/icons";
import {Link} from "react-router-dom";


const SingleProject = ({src, title}) => {
    const [hover, SetHover] = useState(false);
    
    const showIcons = hover ? "Show" : "";

    return (
        <div className="card-container" onMouseEnter={()=> SetHover(true)} onMouseLeave={()=> SetHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>

                <div className="Icon">
                    <Link to="www.google.com">
                        <GitHub/>
                    </Link>
                </div>

                <div className="Icon">
                <Link to="www.google.com">
                        <Visibility/>
                </Link>
                </div>
            </div>
        </div>
    )
}

What do you think?

0 Answers0