Question

当我尝试重定向到我的任务详细信息页面并且我想刷新它时出现错误404我的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但我反应很新，所以我不知道问题是否在这里。

路线：

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

注意＆＃39; /＆＃39;。它告诉浏览器从域名的根目录查看。如果您将其关闭...它会将其附加到网址的当前路径。

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>

刷新页面

2 个答案: