当我刷新页面时，在单击 Link 后响应 GET 请求 URL 更改

Question

当我尝试重定向到我的任务详细信息页面并且我想刷新它时，我收到错误 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

Answer 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.

的当前路径

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

当我刷新页面时，在单击 Link 后响应 GET 请求 URL 更改

React GET request URL changes after clicked Link when i refresh page

url

get

request

reactjs

react-router