时间戳

首页 > 解决方案 > 从内页返回首页后悬停不工作

reactjs - 从内页返回首页后悬停不工作

问题描述

听起来可能很奇怪，但是当我从主页转到内页时，链接悬停效果上的悬停效果很好并进入内页。然后在内页中我有一个返回按钮返回主页，返回主页后，当我悬停在链接上时，没有悬停效果。

这就是我所说的内页，如果有帮助的话

import React from 'react';
import { Switch , Route , BrowserRouter } from 'react-router-dom';
import Training from './section/training';


function App() {
  return (
    <div className="main homepage">
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/training" component={Training} exact={true} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

更新

这是我使用过的main_content.js的一部分<Link>

<div className="portfolio-grid-img">
  <Link to="/training">
    <img src={training_thumb} alt="Training thumbnail" />
    <div className="portfolio-grid-overlay">
      <h3>Site Revamp</h3>
      <p>Training Terminal</p>
    </div>
  </Link>
</div>

标签： reactjs

解决方案

您将需要到主页组件的路由 

import React from 'react';
import { Switch , Route , BrowserRouter } from 'react-router-dom';
import Training from './section/training';
import Home from './homePageContent';


function App() {
  return (
      <BrowserRouter>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/training" component={Training} exact={true} />
          </Switch>
      </BrowserRouter>
  );
}

export default App;

推荐阅读