Question 190895 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 just market-application. Any feedback on this would be appreciated. Also thank you @Drew Reese for pointing me in the right direction.


  2. 0

    React-router-dom appears to support nested routes like you’re doing since v6. It looks to me like your paths are wrong, since they are relative. Try this:

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

    https://www.geeksforgeeks.org/implement-nested-routes-in-react-js-react-router-dom-v6/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search