【问题标题】:React router params and querys is not working反应路由器参数和查询不起作用
【发布时间】:2018-06-09 08:45:57
【问题描述】:

从最近几天开始,我一直在寻找解决这个问题的方法。这里发生的事情是我想要动态链接。你可以在下面看到:

<Route path="/edit/:username" component={EditExpensePage} />

但是当我转到/edit/12 时,我收到了这个错误:

GET http://127.0.0.1:8080/edit/bundle.jsnet::ERR_ABORTED

这是我的代码:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage';
import AddExpensePage from '../components/AddExpensePage';
import EditExpensePage from '../components/EditExpensePage';
import HelpPage from '../components/HelpPage';
import NotFoundPage from '../components/NotFoundPage';
import Header from '../components/Header';

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />

        <Route path="/" component={ExpenseDashboardPage} exact={true} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:username" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />

    </div>
  </BrowserRouter>
);

export default AppRouter;

【问题讨论】:

  • 似乎您的服务器正在处理请求,而不是 react-router。让您的服务器为每条路线返回index.html。这通常是服务器级别的.* 正则表达式。你没有分享任何关于你在哪里托管你的页面,所以我不能更具体。
  • 首先感谢您回答我的问题。我没有在使用本地主机的任何地方托管,或者您可以说我正在使用 127.0.0.1。我已经安装了 path-to-regexp 依赖项,但随后也它不起作用。抱歉英语不好,请忽略我的拼写错误。谢谢
  • 我面临同样的问题,但我没有从您的回答中得到任何解决方案。请详细说明您的回答,以便我能理解确切的解决方案。

标签: javascript reactjs react-router react-redux


【解决方案1】:

您似乎正在使用相对 URL 加载您的 bundle.js 文件。

因此,当您加载页面http://127.0.0.1/Home(或其他)时,它会解析为http://127.0.0.1/bundle.js,这是正确的。

但是,当您加载页面 http://127.0.0.1/edit/12 时,它会解析为 http://127.0.0.1/edit/bundle.js,这是不正确的。

使&lt;script 标记使用绝对 URL。

【讨论】:

  • 感谢您在 2 次重新启动 dev-server 后终于可以正常工作了。谢谢
  • 我面临同样的问题,但我没有从您的回答中得到任何解决方案。请详细说明您的回答,以便我能理解确切的解决方案。 @Drew Noakes
猜你喜欢
  • 2019-05-10
  • 1970-01-01
  • 2016-12-04
  • 2019-10-12
  • 1970-01-01
  • 1970-01-01
  • 2020-01-04
  • 2019-11-15
  • 2021-12-21
相关资源
最近更新 更多