帶有URL參數的React Router

Question

我正在使用taskSupport/:advertiserId Router並具有帶參數的路由路徑taskSupport/:advertiserId ，但是當我嘗試轉到鏈接http://localhost:8080/taskSupport/advertiserId ，出現一堆404（未找到）錯誤我所有的CSS文件和client.min.js文件。 有人知道發生了什么嗎？ 抱歉，我是個反應菜鳥...任何幫助將不勝感激！

<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時，您應在react中使用import而不是修改HTML文件。

import './index.css';

Answer 3

您正在為單頁應用程序使用“ HTML5模式”樣式的路由（而不是＃條路由）

在不了解項目及其依賴性的情況下，您可以嘗試在HTML頭中設置<base> ，例如：

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

帶有URL參數的React Router

問題描述

3 個解決方案

解決方案1
1 已采納 2017-04-26 20:04:37

解決方案2
-1 2017-04-26 19:27:59

解決方案3
-1 2017-04-26 19:28:14

帶有URL參數的React Router

問題描述

3 個解決方案

解決方案1 1 已采納 2017-04-26 20:04:37

解決方案2 -1 2017-04-26 19:27:59

解決方案3 -1 2017-04-26 19:28:14

解決方案1
1 已采納 2017-04-26 20:04:37

解決方案2
-1 2017-04-26 19:27:59

解決方案3
-1 2017-04-26 19:28:14