react-router 不允许 Link 向服务器发送 GET 请求

Question

通常我会使用 axios 发送一个 GET 请求，但是在“React 实践课程”教程中，讲师成功地点击了这条路线

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>
    ))
)

正如here 所见，链接与服务器中的路径匹配，但反应路由器将我发送到 PageNotFound 组件，而不是发送 GET 请求。

为了让链接文件到达服务器，我缺少什么？我怀疑问题出在我的路由文件中。

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

为了扩展我的cmets，我在这里回答。

以下对我有用：

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> 传递正确的href url，它没有落入<Router>，如下所示：https://github.com/ReactTraining/react-router/issues/1147#issuecomment-113180174

您确定将正确的 url 传递给锚的 href 吗？