CODEWITHSUNDEEP
javascriptreactjsreact-router-domcreate-react-appvivus
KyleNoCompile
KyleNoCompile

Reputation: 33

create-react-app : Vivus error in nested url routes

On the React project I'm currently working on I am using Vivus to animate svg images and so far it is working on all my pages. This changed once I added a nested url routes...

Vivus works ...

http://localhost:3000/market-applications

Vivus doesn't ...

http://localhost:3000/market-applications/transportation

The error I get is as follows

Vivus [load]: Cannot find the SVG in the loaded file : images/svg/linea/linea-basic-map.svg
at XMLHttpRequest.onLoad (http://localhost:3000/static/js/vendors-node_modules_react-vivus_lib_index_js.chunk.js:568:17)

I am using react-router-dom for my routes and both the 'market-applications' and 'market-applications/transportation' pages are identical both in code and how I call and use them in App.js.

This is what it looks like in my App.js...

<Route path={`${process.env.PUBLIC_URL + "/market-applications"}`}>
   <Route index element={<MarketApplication/>} />
   <Route path={`${process.env.PUBLIC_URL + "transportation"}`} element={<Transportation/>} />
   <Route path={`${process.env.PUBLIC_URL + "grid"}`} element={<Grid />} />
   <Route path={`${process.env.PUBLIC_URL + "work"}`} element={<Work/>} />
</Route>

Any help on this issue would be greatly appreciated, thank you in advance.

Upvotes: 0

Views: 52

Answers (1)

KyleNoCompile
KyleNoCompile

Reputation: 33

Turns out it was the path I was using to access the image asset. I changed ...

images/svg/linea/linea-basic-map.svg

to

../images/svg/linea/linea-basic-map.svg

and it seems to work for both pages now. I am still a little confused on why this is now fixed. This is how I use ...

<ReactVivus
   id={`contactsvg-${data.id}`}
   option={{
   file: data.icon,
   animTimingFunction: 'EASE',
      type: 'oneByOne',
      delay: 80
      }}
 />

icon = ../images/svg/linea/linea-basic-map.svg

In my head the change I made to 'icon' should make market-applications/transportation work and not market-application. Any feedback on this would be appreciated. Also thank you @Drew Reese for pointing me in the right direction.

Upvotes: 0

Related Questions