react-static /edit/:id /nested routes lose references to assets on refresh / hotload

Question

I am a bit new to react-static, so bear with me.

In development and when statically generated, refreshing a page when on a route that is used as such " /page/edit/:id" will change root reference of image assets.

My routing:

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Root>
        <header className="App-header">
          <Navbar />
        </header>
        <div className="content">
          <Router>
            <Landing path="/" />

            <Page1     key="page1"      path="/page1" />
            <Page1Edit key="page1-edit" path="/page1/edit/:id" />

            <NotFound  default />
          </Router>
        </div>
      </Root>
    </PersistGate>
  </Provider>

Refreshing the root page has no affect on the issue, but when in the edit component, if a refresh or sometimes a hotload hits I lose all image asset references, which re-assign to the root of the component itself. For example, when working, the navbar logo is

img/logo.jpg

however when refreshed in the edit component the asset rewrites to

/edit/img/logo.jpg

score 0 · Answer 1 · answered Nov 23 '19 at 22:15

given the following folder structure and files

/public
    /imgs
        logo.png
/src 
    app.js
    app.css
    /pages
        index.js
        test.js
        /test
            test.js

--> app.js

import React, { Component}                        from 'react'
import { Router }                  from './components/Router'
import Navbar from "./components/NavBar"
import Index  from "./pages/index"
import Test   from "./pages/test/test"

{misc code setting up the component} 

render () {
    <Root>
        <header>
            <Navbar />
        </header>
        <div>
            <Router>
                <Index path="/" />
                <Test path="/test/test />
            </Router>

        </div>
    </Root>
}

--> Navbar.js

import React from "react";
export default () => {
    return (
        <div>
            <h1>navbar test </h1>
            <div className="logo">
                <img src="imgs/logo.png" />
            </div>

            <div>
                <Link to="/test">test</Link>
            </div>

        </div>
    )
}

--> index.js & test.js

import React from "react";

export default () => {
    return (
        <div>
            <h1>LOGO RESOLVE TESTS </h1>
            <img src="imgs/logo.png" />
        </div>
    )
}

--> test.js:

import React from "react";

export default () => {
    return (
        <div>
            <h1>subroute test </h1>
            <img src="imgs/logo.png" />
        </div>
    )
}

The logo resolves so long as you are starting the session from a root location.

If navigating "directly" to or refreshing /test/test will re-write the asset URL to be a child of the current route.

What was : imgs/logo.png

Becomes: test/imgs/logo.png

To overcome this, move the img folder into /src

I do not yet know if this is the correct method, as it seems to me it would be smart to have static assets like a site logo simply live in the public folder, and its unclear what benefit the public folder is in this case.

Alternatively, and preferred method: Create a "static.css" file for referencing static assets, and import that .css file into the app.js after your reset.css. This simplified asset resourcing ( so far ) — fred, Nov 29 '19 at 23:47

react-static /edit/:id /nested routes lose references to assets on refresh / hotload

1 Answers1