Reusable components static images don't load on different Routes

Question

so basically the problem is i have some components like header or footer that are same in all pages, and the way i addressed the image src on the route below is like this

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

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

It works fine on that route and the routes that are not nested but whenever my route changes to something like this

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

</Route>

I should change the image address to below in order to make it work fine

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

And i know i can implant that header inside every component and use props to make the addresses right, But i was wondering if there is a better way to do this?

Does this answer your question? [React router global header](https://stackoverflow.com/questions/36262360/react-router-global-header) — Gabriele Petrioli, Apr 10 '20 at 08:37

NinaW · Accepted Answer · 2020-04-10T08:56:55.027

1

You can use nested routes:

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>
)

You can make the header and footer components as well.

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

edited Apr 10 '20 at 08:56

answered Apr 10 '20 at 08:34

NinaW

638
3
7

it work's fine in this way too, but the problem is, i have some pages that don't have for example the Footer component, so is there a way around for that too, while using this way? – the preacher Apr 10 '20 at 08:43
1

In that case you could make two reusable components, one with footer and one without. For example, include the footer in the `Home` component and have a `City` component without the footer. Then instead of `` go to `` and route the different cities via `City` component as nested routes. An example can be found at https://reacttraining.com/react-router/web/guides/quick-start – NinaW Apr 10 '20 at 08:52

score -1 · Answer 2 · answered Apr 10 '20 at 08:40

-1

Use ES6 imports. Import the SVG and reference it as a variable, don't forget curly braces.

Inside your header component..

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

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

answered Apr 10 '20 at 08:40

Alan Murphy

1

Reusable components static images don't load on different Routes

2 Answers2