Многоразовые компоненты stati c изображения не загружаются на разных маршрутах - PullRequest
Новая
       84

Многоразовые компоненты stati c изображения не загружаются на разных маршрутах

0 голосов
/ 10 апреля 2020

так что в основном проблема в том, что у меня есть некоторые компоненты, такие как верхний или нижний колонтитулы, которые одинаковы на всех страницах, и способ, которым я обратился к изображению 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>

И я знаю, что могу имплантировать этот заголовок в каждый компонент и использовать реквизиты для правильного определения адресов, но мне было интересно, есть ли лучший способ сделать это?

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Вы можете использовать вложенные маршруты: 

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

0 голосов
/ 10 апреля 2020

Использовать импорт ES6. Импортируйте SVG и ссылайтесь на него как на переменную, не забудьте фигурные скобки.

Внутри вашего компонента заголовка .. 

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

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