Question

我正在使用react路由器并且路由路径为taskSupport/:advertiserId 使用params但是当我尝试转到http://localhost:8080/taskSupport/advertiserId链接时，我的所有css文件和client.min.js文件都出现了一堆404（未找到）错误。有谁知道发生了什么？对不起，我是一个反应noob ... 任何帮助都感激不尽！

<Route path="/">
    <IndexRoute component={Layout}></IndexRoute>
    <Route path="about" component={About}></Route>
    <Route path="referral" component={Referral}></Route>
    <Route path="taskSupport(/:advertiserId)" name="taskSupport" component={TaskSupport}></Route>
    <Route path="faq" component={Faq}></Route>
    <Route path="faq-plain" component={FaqPlain}></Route>
</Route>

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>BitMaker</title>
    <link rel="icon" type="image/png" href="img/bitmaker.png" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="css/faq.css">
    <link rel="stylesheet" type="text/css" href="css/error404.css">
    <link rel="stylesheet" type="text/css" href="css/about.css">
    <link rel="stylesheet" type="text/css" href="css/taskSupport.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Prompt:300,400,500,600,700" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
    <div id="app">
        appHtml
    </div>
    <script src="client.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</body>

Answer 1

这是一个相对链接问题。

您正在使用相对链接尝试从“/taskSupport/:advertiserID/filename.ext”而不是从域的根目录获取它们。

要从根目录中提取它们，请让您的引用链接以正斜杠“/”'/ css / stylesheet.css'和'/ client.min.js'<开头/强>

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">

和

<script src="/client.min.js"></script>

Answer 2

您的反应路线链接应如下所示。

<Link to="/taskSupport/adID123"></Link>

你需要像这样从react-router导入链接组件。

import { Link } from 'react-router'

我还认为您希望您的路线设置如此

<Route path="/taskSupport/(:advertiserId)" name="taskSupport" component={TaskSupport}></Route>

如果在taskSupport之后没有查找正斜杠，那么正则表达式就是这个，

<Route path="taskSupport*(/:advertiserId)" name="taskSupport" component={TaskSupport}></Route>

由于taskSupport *将匹配taskSupport / abc123 /，因此永远不会匹配可选部分。

如果您更改此路线

<Route path="/taskSupport/(:advertiserId)" name="taskSupport" component={TaskSupport}></Route>

然后正则表达式知道何时结束它的匹配并开始寻找advertiserId

此外，当您在项目中包含本地CSS时，您应该使用内部反馈而不是修改HTML文件。

import './index.css';

Answer 3

您正在为单页应用程序使用“HTML5 Mode”样式路线（而不是＃routes）

在不了解项目及其依赖项的更多信息的情况下，您可以尝试在HTML头中设置<base>，例如：

<!DOCTYPE html>
<html>
  <head>
    <base href="/" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

React Router w / URL params

3 个答案: