react-static /edit/:id /nested路由在刷新/热加载时丢失对资产的引用
react-static /edit/:id /nested路由在刷新/热加载时丢失对资产的引用
提问于 2019-11-22 04:02:48
我对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
回答 1
Stack Overflow用户
发布于 2019-11-24 06: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中
我还不知道这是不是正确的方法，因为在我看来，将站点徽标这样的静态资产简单地放在公共文件夹中是明智的，而且还不清楚公共文件夹在这种情况下有什么好处。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58982890
复制相关文章
相似问题
腾讯云开发者
