背景图像仅在重新加载页面后显示

Posted 2023-03-15

【中文标题】背景图像仅在重新加载页面后显示

【英文标题】：Background image only shows up after reloading the page

【发布时间】：2021-06-01 06:08:06

【问题描述】：

我正在尝试像通常在 React 上所做的那样导入图像并将该值用作样式化组件的背景图像，呈现的第一页似乎使用背景很好，但是当使用链接导航应用程序时从 react-router 它似乎没有为路由器内的任何组件加载背景。我必须重新加载每个组件才能看到实际的背景。

import React from "react";
import MiningBackground from "assets/backgrounds/miningBackground.jpg";
import styled from "@emotion/styled";

const MiningPage = () => 
  return <BackgroundContainer key="mining-background"></BackgroundContainer>;
;

const BackgroundContainer = styled.div`
  background-image: url($MiningBackground);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  min-height: 100vh;
  min-width: 100vw;
  background-color: "#0A2836";
  color: "#0A2836";
`;
export default MiningPage;

经过进一步检查，路由器似乎根本没有返回组件，我将附加路由器和导航。

抽屉：

import 
  faHome,
  faGem,
  faCoins,
  faSpaceShuttle,
 from "@fortawesome/free-solid-svg-icons";
import  Divider, Drawer, List, Toolbar, Typography  from "@material-ui/core";
import React from "react";
import AMenuItem from "components/atoms/AMenuItem";
import styled from "@emotion/styled";
import MadeByCommunityBlack from "assets/MadeByTheCommunity_Black.png";

const SideMenu: React.FC = () => 
  return (
    <StyledDrawer variant="permanent" open>
      <div>
        <Toolbar />
        <StyledList>
          <AMenuItem link="/" icon=faHome text="Home" />
          <AMenuItem link="/mining" icon=faGem text="Mining" />
          <AMenuItem link="/trading" icon=faCoins text="Trading" />
          <AMenuItem link="/fleet" icon=faSpaceShuttle text="Fleet" />
          <Divider />
        </StyledList>
      </div>
      <TradeMarkContainer>
        <StyledImage
          src=MadeByCommunityBlack
          
        />
        <Typography variant="caption">
          Star Citizen®, Roberts Space Industries® and Cloud Imperium ® are
          registered trademarks of Cloud Imperium Rights LLC.
        </Typography>
      </TradeMarkContainer>
    </StyledDrawer>
  );
;

const StyledDrawer = styled(Drawer)`
  .MuiDrawer-paper 
    z-index: 980;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0px 10px 10px 10px;
    width: 190px;
  
`;

const TradeMarkContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const StyledList = styled(List)`
  background-color: "#0A2836";
`;

const StyledImage = styled.img`
  width: 150px;
`;

export default SideMenu;

路由器：

import FleetPage from "components/pages/FleetPage";
import MiningPage from "components/pages/MiningPage";
import TradingPage from "components/pages/TradingPage";
import React from "react";
import  Route, Router, Switch  from "react-router-dom";
import HomePage from "../components/pages/HomePage";
import  createBrowserHistory  from "history";
import SideMenu from "components/organisms/SideMenu";
import TopBar from "components/organisms/TopBar";

const Routes = () => 
  const history = createBrowserHistory();
  return (
    <Router history=history>
      <TopBar />
      <SideMenu />
      <Switch>
        <Route path="/fleet" component=FleetPage />
        <Route path="/trading" component=TradingPage />
        <Route path="/mining" component=MiningPage />
        <Route path="/" component=HomePage />
      </Switch>
    </Router>
  );
;

export default Routes;

【问题讨论】：

hmm.. 你给它什么钥匙？我不认为你需要它。如果您没有加载任何图像，您可以从开发工具中检查一次样式吗？

检查开发工具，路由器根本没有返回组件。

【参考方案1】：

问题是我从react-router-dom 导入Router 而不是BrowserRouter。改变它并删除历史道具就可以了。