陣營路由器W /網址參數

我使用的反應路由器具有的路由路徑taskSupport/:advertiserId 使用參數，但是當我嘗試去聯繫，http://localhost:8080/taskSupport/advertiserId，我收到了一堆的404（未找到）我所有的CSS錯誤文件和我的client.min.js文件。任何人都知道發生了什麼事？對不起，我是一個反應noob ... 任何幫助將不勝感激！陣營路由器W /網址參數

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

來源

2017-04-26 Esther

你可以添加在CSS和JS文件拉動HTML？您可以使用相對鏈接，嘗試從「/taskSupport/:advertiserID/filename.ext」而不是從域的根目錄獲取它們。請改用taskSupport的此路徑路徑：「taskSupport /：advertiserId」，不要使用圓括號。 –

括號只是使advertiserId參數可選。我將添加我的html文件 – Esther

噢好吧所以是的，你正在使用相對鏈接爲您的資源，它試圖從你在哪裏的位置抓住他們。要將它們從根目錄中取出，請將參考鏈接以'/'開頭，如'/css/stylesheet.css'和'/client.min.js'。 –

這是一個相對鏈接問題。

您使用相對鏈接這將嘗試從「/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>

來源

2017-04-26 20:04:37

-1

您的鏈接反應路線應該是這樣的。

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

你需要從這樣的反應路由器導入鏈接的組成部分。

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 *將匹配taskSuppo rt/abc123 /可選部分將永遠不會匹配。

如果你改變了路線，這

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

然後正則表達式知道何時才能結束它的匹配，並開始尋找一個ADVERTISERID

此外，當您在您的項目，你應該本地CSS使用內部導入，而不是修改您的HTML文件。

import './index.css';

來源

2017-04-26 19:27:59 sissonb

-1

您使用「HTML5模式」的風格路線（而不是＃路由）爲您的單頁的應用程序

不知道更多關於你的項目和它的依賴，你可以嘗試設置例如：

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

來源

2017-04-26 19:28:14 Alex

這實際上是通過轉到鏈接加載組件：http：// localhost：8080/taskSupport/advertiserId' 但沒有加載的CSS文件...是我的路由和HTML文件設置不好的做法的方式？是否有更優選和更簡單的方法來組織我的路由？如果這是有道理的... haha – Esther

我認爲這與@Michael Lyons的結合是你要找的，''解決了一個問題，絕對的CSS路徑（爲你的CSS添加一個前導'/'文件）可能會修復你的CSS加載 – Alex

陣營路由器W /網址參數

回答

相關問題