Как создать ссылку на файл xml в react-router?

Question

[Владимир Голубь]

Как сделать правильный переход на xml файл в react-router ?

<Route path="/rss/test.xml" />

По ссылке должен быть доступен файл xml.

В данный момент - Cannot GET /rss/test.xml

Использую webpack dev server.

Comments

[Владимир Голубь]

но содержимое файла я получаю с сервера.

Answer 1

[Антон Спирин]

Вам надо использовать тег a:

<a href="/path/file_name.xml" download>Download</a>

Если вы хотите использовать file-loader для переноса файла в статическую директорию сборки, то:

<a href={require('../path/file_name.xml')} download>Download</a>

react-router используется исключительно для клиентской навигации и рендера древа в зависимости от значения location.

Comments

[Владимир Голубь]

а как это сделать в Switch ?

Там же нельзя прокинуть ссылку.

Задача при переходе по ссылке, даже если просто набрать в строке поиска localhost:8080/rss/test.xml, должен скачиваться файл xml.

[Антон Спирин]

Владимир Голубь, не надо это делать в Switch. Не надо для этого использовать компоненты react-router.
Вам надо использовать тег a с атрибутом download, а ваш сервер должен отдавать нужную статику.
Это все.

[Антон Спирин]

Владимир Голубь, так же вам важно понимать, что при наборе адреса в браузере и переходе, react-router не используется. Он влкючается в работу только после загрузки страницы с вашим приложением.
Тут рекомендую изучить основы HTTP.
Файл будет скачиваться, если ваш сервер раздает статику. webpackDevServer это делает из коробки. Для express вам надо добавить middleware:
app.use(express.static('build'));

Ну и файл сам надо добавить в стстический раздел вашей сборки. Если использовать import или require, то webpack скопирует нужный файл и зарезолвит все пути сам.

[Владимир Голубь]

Антон Спирин, а если файл к которому идет обращение находится на другом сервере ? То есть файл находится тут mysite.com/text.xml, а открываться он должен по localhost:8080/test.xml. На каком уровне должна происходить переадресация ?

[Антон Спирин]

Владимир Голубь, просто добавьте ссылку на другой сервер. Тут никаких импортов в коде делать не надо.

<a href="http://cdn.site.com/file.xml" download>Click to download</a>

[Владимир Голубь]

Антон Спирин, мне не нужна ссылка на скачивание, нужно при переходе по ссылке из строки браузера localhost:8080/rss/test.xml нужно получать контент из mysite.com/text.xml и вывести его. Возможно ли это реализовать при помощи react ?

[Владимир Голубь]

Антон Спирин,

Первый вопрос точкой вроде решил, теперь не распознает точку

devServer: {
            historyApiFallback: {
                disableDotRule: true
            }

[Антон Спирин]

Владимир Голубь, если хотите отдавать по url одного сервера статику с другого, то на первом сервере вам надо использовать проксирование.