可重用组件静态图像不会在不同的路由上加载

Question

所以基本上问题是我有一些组件，如 header 或所有页面中相同的页脚，我在下面的路线上处理图片 src 的方式是这样的

<Route exact path="/" component={HomePage} >

</Route>
<img src="./SVG/icon.svg" alt="go-logo"></img>

它在该路线和未嵌套的路线上工作正常，但每当我的路线更改为这样的东西时

<Route exact path="/city/NY" component={City} >

</Route>

我应该把图片地址改成下面这样才能正常工作

<img src="../SVG/icon.svg" alt="go-logo"></img>

而且我知道我可以将 header 植入每个组件并使用 props 使地址正确，但是我想知道是否有更好的方法来做到这一点？

Answer 1

您可以使用嵌套路由：

return (
  <Router>
    <div>
      <header>Your Header</header>

      <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route path="/city/NY">
          <City />
        </Route>  
      </Switch>

      <footer>Your Footer</footer>
    <div>
  </Router>
)

您也可以制作页眉和页脚组件。

https://reacttraining.com/react-router/web/example/nesting

Answer 2

使用 ES6 导入。导入 SVG 并将其作为变量引用，不要忘记花括号。

在你的头部组件中..

import logo from "./SVG/icon.svg";

<img src={logo} alt="go-logo"></img>

可重用组件静态图像不会在不同的路由上加载

Reusable components static images don't load on different Routes

reactjs

react-router

src

nested-routes