Я собираюсь использовать рендеринг на стороне сервера для моего приложения реакции.Приложение имеет какой-то локальный текстовый файл, который нужно получить при загрузке страницы.Я использую response-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 для извлечения и отображенияих.(После npm run dev
текстовые файлы будут расположены в build / static / files. В соответствии с конфигурацией webpack и расположены так). Вспомогательная функция loadData записывается следующим образом.
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
.URL запроса на вкладке Сеть был отправлен как "http://localhost:5000/static/files/sample-post.txt"
.Однако при рендеринге на стороне сервера добавляется дополнительный путь (/ posts /) для ссылки, такой как "http://localhost:5000/posts/static/files/sample-post.txt"
, и он не позволяет правильно извлекать данные, поскольку он не может найти соответствующий файл по неправильному пути!Почему это дополнительное слово добавляется в запрос, который отправляется на экспресс.