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

Question

我正在尝试像通常在 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}
          alt="Made by the star citizen community official logo"
        />
        <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;

Answer 1

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