Question

我将在我的react应用程序中使用服务器端渲染。应用程序有一些本地文本文件，应在加载页面时获取。我正在使用react-router-dom并通过对象数组传递路由，如下所示：

   AppRoutes.js

import Home from ...
import Posts from ...
import loadData from ....
const AppRoutes = [
 {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/posts/sample',
    component: Posts,
    loadData: () => loadData('/posts/sample')
  },
]

我试图根据传递给loadData helper函数的路径来获取本地文本文件，以获取并显示它们。（在npm run dev之后，文本文件将位于webpack config的build / static / files中，并且位于该位置。）loadData helper函数的编写方式如下。

import 'isomorphic-fetch';
import localFileFetch from ...
export default async filePath => {
  switch (filePath) {
case '/posts/sample'
await localFileFetch('../text-file-store/post-sample.txt')
...
}
const localFileFetch = (file)=> {
  return fetch(file)
    .then(res => {
     ...
    })
    .then(data => {
     ....
    });

}
};

localFileFetch函数应根据切换情况获取文件，并返回要在相关页面上显示的足够的文本文件。当我使用客户端呈现时，它正在工作并成功获取路径/public/static/files中的文件（具有相关路径）。 “网络”标签中的请求网址已作为"http://localhost:5000/static/files/sample-post.txt"发送。但是，在服务器端渲染中，附加的路径（/ posts /）被添加到"http://localhost:5000/posts/static/files/sample-post.txt"之类的链接中，由于无法在错误的路径中找到相关的文件，因此无法正确获取数据！为什么将这个多余的单词添加到发送来表达的请求中。

Reactjs服务器端渲染---提取本地文件

0 个答案: