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?