我对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>
刷新根页面对该问题没有影响,但在编辑组件中时,如果刷新或有时是热负载命中,我将丢失所有图像资源引用,这些引用重新分配给组件本身的根。例如,工作时,导航栏徽标为
img/logo.jpg
但是,当在编辑组件中刷新时,资产将重写到
/edit/img/logo.jpg
发布于 2019-11-23 22:15:29
给定以下文件夹结构和文件
/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>
)
}
只要您从根位置启动会话,徽标就会解析。
如果“直接”导航到或刷新/test/test将重写资产URL,使其成为当前路由的子级。
是什么: imgs/logo.png
变成: test/imgs/logo.png
要克服此问题,请将img文件夹移动到/src中
我还不知道这是不是正确的方法,因为在我看来,将站点徽标这样的静态资产简单地放在公共文件夹中是明智的,而且还不清楚公共文件夹在这种情况下有什么好处。
https://stackoverflow.com/questions/58982890
复制相似问题