如何在React

Question

我正在从事react项目，因为我有Home组件。通过将Home组件悬停，可以获得Home Static Image组件。如何在反应中实现这一目标。

例如：例如，如果我正在寻找生日蛋糕。我去了一个蛋糕网站，在那个网站上，如果我将鼠标悬停在蛋糕页面上，那么我就能在蛋糕页面下看到他们提供的各种蛋糕。

如何为该蛋糕示例进行路由

这是Navbar.js

import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <div className='container-fluid'>
            <div className='container'>
                <div className='row'>
                    <div className='col-12'>
                        <nav className="navbar navbar-expand-lg navbar-light bg-light">
                            <div classNameName='logo'>
                                <img src='assets/images/logo.png' alt='logo'></img>
                            </div>
                            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                            <div className="collapse navbar-collapse" id="navbarNav">
                                <ul className="navbar-nav">
                                    <li className="nav-item active">
                                        <Link className='nav-link dropdown-toggle' to='/'>HOME</Link>
                                        <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                            <Link className='nav-link' to='/'>Home Static Image</Link>
                                        </div>
                                    </li>
                                    <li className="nav-item">
                                        <a className="nav-link" href="www.facebook.com">Features</a>
                                    </li>
                                    <li className="nav-item">
                                        <a className="nav-link" href="www.facebook.com">Pricing</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Navbar

在Home文件夹中，我有两个组件，一个是Home.js，另一个是Staticimage.js

这是Home.js

import React from 'react';
import './Home.css';


function Home() {
    return(
        <div className='container'>
            <div className='row'>
                <h1>Home works</h1>
            </div>
        </div>
    )
}

export default Home

这是Staticimage.js

import React from 'react';
import './Home.css';


function Static() {
    return(
        <div className='container'>
            <div className='row'>

            </div>
        </div>
    )
}

export default Static

这是App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';
import Static from './Pages/Home/Staticimage';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
          <Route exact path='/'><Static></Static></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

如果我不确定是否有疑问，请发表评论。