React Router mit URL-Parametern

Ich benutze Reagieren Router und haben eine Route mit Parametern aber wenn ich versuche, auf den Link zu gehen, http://localhost:8080/taskSupport/advertiserId, bekomme ich eine Reihe von 404 (Not Found) Fehler für alle meine CSS Dateien und meine client.min.js Datei. Wer weiß was los ist? Entschuldigung, ich bin ein Reaktion Noob ... Jede Hilfe wird sehr geschätzt werden!React Router mit URL-Parametern

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

Meine HTML-Datei:

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

Quelle

2017-04-26 Esther

können Sie die HTML hinzufügen, die in der CSS und JS-Dateien zieht? Sie könnten relative Links verwenden, die versuchen würden, sie von "/taskSupport/:advertiserID/filename.ext" anstatt vom Stamm der Domain zu erhalten. Versuchen Sie auch, diesen Routenpfad für taskSupport zu verwenden: "taskSupport /: advertiserId", ohne die Klammern. –

Die Klammern machen den AdvertiserId-Parameter optional. Ich werde meine HTML-Datei hinzufügen – Esther

Oh okay, ja, Sie verwenden relative Links für Ihre Ressourcen, die versucht, sie von jedem Ort, an dem Sie sich befinden. Um sie von der Wurzel zu ziehen, beginnen Sie Ihre Referenzlinks mit einem '/' wie folgt: '/css/stylesheet.css' und '/client.min.js'. –

Dies ist ein relativer Link Problem.

Sie verwendeten relative Links, die versuchen würden, sie von "/ TaskSupport/:advertiserID/filename.ext" statt vom Stamm der Domäne zu erhalten.

Um sich von der Wurzel zu ziehen, haben Ihre Referenz-Links mit einem Schrägstrich beginnen ‚/‘ ‚/css/stylesheet.css‘ und ‚/client.min.js‘.

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

und

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

Quelle

2017-04-26 20:04:37

-1

Ihre Verbindungen zu reagieren Routen sollte wie folgt aussehen.

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

Sie den Link-Komponente aus reagieren-Router wie diese importieren.

import { Link } from 'react-router'

Ich denke auch Sie Ihre Route wie diese

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

einrichten möchten Wenn der Schrägstrich wird nicht umsorgt taskSupport dann die Regex dies ziemlich viel,

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

Da TaskSupport * TaskSuppo entspricht rt/abc123/der optionale Teil wird niemals abgeglichen.

Wenn Sie die Route zu diesem

ändern

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

Dann weiß der regex, wenn es Spiel zu beenden und beginnen eine AdvertiserID

Auch auf der Suche, wenn Sie lokale CSS in Ihrem Projekt gehören, sollten Sie Verwenden Sie einen Import innerhalb reagieren und nicht Ihre HTML-Datei ändern.

import './index.css';

Quelle

2017-04-26 19:27:59 sissonb

-1

Sie verwenden „HTML5-Modus“ Stil Routen (als Routen # Gegensatz) für Ihre einzige Seite app

Ohne mehr über Ihr Projekt und seine Abhängigkeiten zu wissen, können Sie versuchen zu setzen ein <base> in Ihrem HTML-Kopf, zum Beispiel:

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

Quelle

2017-04-26 19:28:14 Alex

umgehen müssen Dies funktioniert tatsächlich, dass die Komponente geladen, indem Sie auf den Link: http: // localhost: 8080/taskSupport/advertiserId' aber keine der CSS-Dateien geladen ... Ist die Art, wie ich meine Routing-und HTML-Datei einrichten schlechte Praxis? Gibt es eine bevorzugtere und einfachere Möglichkeit, mein Routing zu organisieren? Wenn das Sinn macht ... haha – Esther

Ich denke, dies kombiniert mit @Michael Lyons Antwort ist, was Sie suchen, wo die '' adressiert ein Problem, und die absoluten CSS-Pfade (fügen Sie eine führende'/'zu Ihrem CSS Dateien) wird wahrscheinlich Ihr CSS-Laden beheben – Alex

React Router mit URL-Parametern

Antwort

Verwandte Themen