Реагируйте на маршрутизацию, чтобы получить пакеты во вложенной папке

Я создал очень простое приложение React и установил его в подпапку веб-сайта IIS10.

Проблема в том, что нет никакого способа сказать, что он должен принимать статические ресурсы, фрагменты пакетов js и css в этой папке, а не непосредственно в корне.

Я добавил значение домашней страницы в package.json и базовое имя в BrowserRouter, как описано здесь: https://reactrouter.com/web/api/BrowserRouter, но это не работает.

Это код в app.jsx:

import * as React from 'react';
import '@brains/ui/src/globals/scss/styles.scss';
import './fontawesome/all.css'
import './App.css';
import MyComponent from './MyComponent';
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename = "/mySubFolder">
      <Switch>
          <Route
            exact
            path = "/"
            render = {(props) => <MyComponent {...props} />}
          />
      </Switch>    
    </BrowserRouter>
  )
}
export default App;

Я поставил сборку на сервер, но приложение React всегда ищет статические файлы в www.mydomain.com/static/.. . вместо www.mydomain.com/mysubfolder/static/...

Что еще я могу попробовать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
293
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете приложение create-react-app, все статические файлы обычно обслуживаются с использованием переменной среды PUBLIC_URL. Таким образом, вы должны иметь возможность установить его вручную с помощью файла .env или с помощью EXPORT (или в зависимости от того, что эквивалентно вашей ОС), поэтому вы получите следующее:

PUBLIC_URL=www.mydomain.com/mysubfolder/

Это должно сделать все статические файлы, обслуживаемые из www.mydomain.com/mysubfolder/static/..., такими, как вы хотите. Подробнее об этом можно прочитать здесь: https://create-react-app.dev/docs/using-the-public-folder/

React-router не влияет на статическое обслуживание файлов. Он используется только для маршрутизации страниц.

Другие вопросы по теме