Logo not linked back to the homepage?-CodePudding

I am trying to link my logo, so that it takes the user back to the homepage, however the following line of

<div><img src = {Logo} alt='Logo' className='Logo' to={"/"}/></div>

does not seem to be working.

This line can be found within the following App.js

function App() {
  return (
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
        <div><img src = {Logo} alt='Logo' className='Logo' to={"/"}/></div>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Routes>
            <Route path='/' element={<Home />} /> // components on element prop
            <Route path="/sign-in" element={<Login />} />
            <Route path="/sign-up" element={<SignUp />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}
export default App;

Homepage is also as follows

import React, { Component } from "react";
export default class Home extends Component {
    render() {
        return (
         <h1>home</h1>
        );
    }
}

CodePudding user response：

I think you just need to wrap the image in a Link

<Link to = '/'> 
  <div>
    <img src = {Logo} alt='Logo' className='Logo'/>
  </div>
</Link>