2016-09-08 2 views
-1

I Router mit diesen Strecken reagieren bin mit:Reagieren Router nicht dynamische Pfad Rückkehr

let routes = [{ 
    path : homePath, 
    component : Layout, 
    indexRoute: { component : Home }, 
    childRoutes : [ 
    { 
     path : "translations", 
     component : Translation, 
    }, 
    { 
     path : "articles", 
     component : Articles, 
    },{ 
     path : "article/:id", 
     component : Article, 
    }, 
    { 
     path : "contact", 
     component : Contact, 
    }, 
    ], 
}]; 
ReactDOM.render(
    <Router routes = {routes} history = {rRouter.browserHistory}> 
    </Router> 
    ,app); 

Komponenten:

class Articles extends React.Component{ 
    render(){ 
    return(
     <h1>Articles</h1> 
    ); 
    } 
} 
class Article extends React.Component{ 
    render(){ 
    console.log(this.props); 
    return(
     <h1>Article</h1> 
    ); 
    } 
} 

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <title>HYassin</title> 
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/> 
    <link href='http://yui.yahooapis.com/pure/0.6.0/pure-min.css' rel='stylesheet' type='text/css'/> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> 
    <link href="http://localhost/Hyassin/src/css/main.css" rel="stylesheet" type="text/css"/> 
    <!-- React stuff --> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react-router/2.7.0/ReactRouter.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/superagent/2.2.0/superagent.js"></script> 
    <script src = "https://unpkg.com/[email protected]/lib/mobx.umd.js"></script> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
</head> 

    <body> 
    <div id = "webapp"></div> 
    <script src = "./src/js/bundle.js"></script> 
    </body> 
</html> 

.htaccess

RewriteEngine On 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
    RewriteRule^- [L] 
    RewriteRule^/index.php [L] 

Wenn ich versuche, zum Pfad localhost/articles zu gehen, funktioniert es gut, aber wenn ich versuche, localhost/article/1 zu verwenden, gibt es mir den folgenden Fehler Uncaught SyntaxError: Unexpected token <. Komponenten und Routen sind in der gleichen js-Datei. Was könnte der Grund für diesen Fehler sein? Vielen Dank für Ihre Zeit.

+0

Klingt wie etwas erwartet Javascript aber HTML-Empfang - überprüfen Sie Ihre Netzwerk-Registerkarte –

+0

können Sie zur Verfügung stellen Express-Routen und index.html –

+0

Haben Sie einen URL-Fallback auf Ihrem Entwicklungsserver festgelegt? Servieren Sie Ihre 'index.html' auch, wenn Sie versuchen, auf eine unbekannte Route auf Ihrem Entwicklungsserver zuzugreifen? –

Antwort

0

Es stellte sich heraus, dass das Problem durch die Art und Weise verursacht wurde ich mein Skript enthalten file.Instead von src = "/src/js/bundle.js" ich src ="http://localhost/src/js/bundle.js" ändern musste

Verwandte Themen