0

我对 react-static 有点陌生，所以请耐心等待。

在开发中和静态生成时，在用作“/page/edit/:id”的路由上刷新页面将更改图像资产的根引用。

我的路由：

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

刷新根页面对问题没有影响，但是在编辑组件中，如果刷新或有时热加载命中，我会丢失所有图像资产引用，这些引用重新分配给组件本身的根。例如，工作时，导航栏标志是

图像/标志.jpg

但是，当在编辑组件中刷新时，资产会重写为

/edit/img/logo.jpg

4

1 回答 1

0

给定以下文件夹结构和文件

/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>
}

--> 导航栏.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>
    )
}

--> 测试.js：

import React from "react";

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

只要您从根位置启动会话，徽标就会解析。

如果“直接”导航到 /test/test 或刷新 /test/test 会将资产 URL 重写为当前路由的子级。

什么是：imgs/logo.png

变成：test/imgs/logo.png

为了克服这个问题，将 img 文件夹移动到 /src

我还不知道这是否是正确的方法，因为在我看来，将站点徽标之类的静态资产简单地存在于公用文件夹中是明智的，并且不清楚在这种情况下公用文件夹有什么好处。

于 2019-11-23T22:15:28.990 回答