在我刷新页面时单击链接后反应 GET 请求 URL 更改答案

【问题标题】：React GET request URL changes after clicked Link when i refresh page在我刷新页面时单击链接后反应 GET 请求 URL 更改
【发布时间】：2015-07-27 18:37:53
【问题描述】：

当我尝试重定向到我的任务详细信息页面并且我想刷新它时，我收到错误 404 File not found from my index.html 因为我的样式表路径和 scripts.js 路径从 localhost:8080/styles 更改.css 到 localhost:8080/tasks/style.css 我不知道为什么会这样？

我的html代码：

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='http://fonts.googleapis.com/cssfamily=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- build:css css/application.css -->
  <link rel="stylesheet" href="styles.css">//BREAKS HERE
  <!-- endbuild -->

</head>
<body>
  <main class="site-content" id="main">
    <p>Main content</p>
  </main>

  <!-- build:js js/application.js -->
  <script src="scripts.js"></script>//AND BREAKS HERE
  <!-- endbuild -->
</body>

我正在使用 react-router，但我对 react 还很陌生，所以我不知道问题是否在这里。

路线：

<Route handler={App}>
    <Redirect from="/" to="login" />

    <Route name="login" path="login" handler={Login} />
    <Route name="dashboard" path="dashboard" handler={Dashboard} />
    <Route name="task" path="/tasks/:id" handler={Task} />
  </Route>

当我在仪表板刷新时工作正常，但当我转到任务/：id 并刷新页面时，我收到此错误：

22821:14 GET http://localhost:8080/tasks/styles.css 
22821:27 GET http://localhost:8080/tasks/scripts.js
Failed to load a resource: the server responded with status of 404

【问题讨论】：

标签： url get request reactjs react-router

【解决方案1】：

您需要正确设置标签src中的路径。

<!-- build:css css/application.css -->
<link rel="stylesheet" href="/styles.css">//BREAKS HERE
<!-- endbuild -->

<!-- build:js js/application.js -->
<script src="/scripts.js"></script>//AND BREAKS HERE
<!-- endbuild -->

注意“/”。它告诉浏览器从域名的根目录开始查找。如果你把它关掉......它会将它附加到 url 的当前路径。

【讨论】：

【解决方案2】：

App 组件没有路径，在这种情况下，任务路由的路径不应该以 / 开头。看看这是否有效：

<Route path="/" handler={App}>
        <DefaultRoute handler={Login} />
        <Route name="login" path="login" handler={Login} />
        <Route name="dashboard" path="dashboard" handler={Dashboard} />
        <Route name="tasks" path="tasks/:id" handler={Task} />
</Route>

【讨论】：

我试过了，得到了这个：警告：失败的 propType：不应该有“路径”道具 warning.js:48 警告：不应该有“路径”道具不变量.js:42 Uncaught Error: Invariant Violation: You may not have more than one route named "login" (@cwbutler answer解决了我的问题)
啊，我的错。 <DefaultRoute handler={Login}> 应该可以工作，因为我必须使用 DefaultRoute 和 Route 使用相同的处理程序，就像这样。