React-router не позволяет Link отправлять GET-запрос на сервер

Question

Обычно я отправляю запрос GET, используя axios, но в учебнике «Курс React Practice» инструктор успешно проходит этот маршрут

app.get('/api/admin/download/:filename', auth, admin, (req, res) => {
    console.log('here I am ', req.params.filename);
    const file = path.resolve('.')+`/uploads/${req.params.filename}`;
    res.download(file);
})

со ссылками в этом коде

import {Link} from 'react-router-dom';

showFiles = () => (
    this.state.files &&
    this.state.files.map((filename,i) => (
        <li key={i}>
            <Link   to={`/api/admin/download/${filename}`}
                    target="_blank">
                {filename}
            </Link>
        </li>
    ))
)

Как видно здесь , ссылка соответствует пути на сервере, но реагирующий маршрутизатор вместо этого отправляет меня в компонент PageNotFound и никогда не отправляет запрос GET.

Чего мне не хватает, чтобы файл Link попал на сервер? Я подозреваю, что проблема в моем файле маршрутов.

const Routes = () => {
    // null = public route
    return (
        <Layout>
            <Switch>
                <Route path="/admin/add_product" exact component={Auth(AddProduct, true)} />
                <Route path="/admin/manage_categories" exact component={Auth(ManageCategories, true)} />
                <Route path="/admin/manage_site" exact component={Auth(ManageSite, true)} />
                <Route path="/admin/add_file" exact component={Auth(AddFile, true)} />

                <Route path="/user/cart" exact component={Auth(Cart, true)} />
                <Route path="/user/dashboard" exact component={Auth(Dashboard, true)} />
                <Route path="/user/user_profile" exact component={Auth(UpdateProfile, true)} />

                <Route path="/register_login" exact component={Auth(RegisterLogin, false)} />
                <Route path="/register" exact component={Auth(Register, false)} />
                <Route path="/product/:id" exact component={Auth(Product, null)} />
                <Route path="/shop" exact component={Auth(Shop, null)} />
                <Route path="/" exact component={Auth(Home, null)} />
                <Route component={Auth(PageNotFound)} />
            </Switch>
        </Layout>
    )
}

Answer 1

Чтобы расширить мои комментарии, я отвечу здесь.

Для меня работает следующее:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const About = () => <div>About</div>
const Home = () => <div>Home</div>
const Topics = () => <div>Topics</div>

const apiUrl = "http://localhost:9000/api";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
        <li>
          <a href={`${apiUrl}/v1/test`}>Api GET request</a>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

render(<BasicExample />, document.getElementById("root"));

Итак, я просто создал <a>, передав правильный URL-адрес href и егоне попал в <Router>, как указано здесь: https://github.com/ReactTraining/react-router/issues/1147#issuecomment-113180174

Вы уверены, что передаете правильный URL-адрес для ссылки якоря?