2016-07-29 36 views
0

Guten Nachmittag Ich habe Probleme mit dem ReactRouter und der Handhabung von Routen. Ich beobachte die Wes Bos Web-Serie über React for Beginners und nachdem ich dem Video gefolgt bin, wird eine meiner beiden Routen nicht gerendert und ich bekomme einen 404 Fehler in der Konsole.ReactRouter funktioniert nicht mit Platzhalterrouten

Hier ist der Code, mit dem ich arbeite, nehmen Sie es nur auf dem Glauben, dass die anderen Komponenten, die nicht erwähnt, funktionieren, das ist ein Routing-Problem sowieso.

var React = require('react'); 
var ReactDOM = require('react-dom'); 


var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var Navigation = ReactRouter.Navigation; 

var createBrowserHistory = require('history/lib/createBrowserHistory');  

var App = React.createClass({ 
     render: function(){ 
      return(
      <div className="catch-of-the-day"> 
       <div className="menu"> 
        <Header tagline="Fresh Seafood Market" num="5000" /> 
       </div> 
       <Order /> 
       <Inventory /> 
      </div> 
      ) 
     } 
    }) 
    var StorePicker = React.createClass({ 
     render: function(){ 
     return(
      <form className="store-selector"> 
      {/* Comment goes in here*/} 
      <h2>Please enter A Store</h2> 
      <input type="text" ref="storeID" required /> 
      <input type="submit"/> 
      </form> 
     ) 
     } 
    }); 
    var routes = (
     <Router history={createBrowserHistory()}> 
      <Route path="/" component={StorePicker}/> 
      <Route path="/store/:storeId" component={App}/> 
     </Router> 
    ) 
    ReactDOM.render(routes, document.getElementById("main")); 

Also das ist, was passiert: Route my home is localhost:3000 und die Route localhost:3000/store/[whatever I type here] funktioniert nicht meine Komponente macht nicht und ich erhalte ein 404 Fehler beim Lesen: http://localhost:3000/store/build/main.js 404 (Not Found). Wenn ich in meine build/main.js Datei schaue 1) dauert es eine Weile zu laden und 2) die einzige Erwähnung meiner Route ist in der Linie 25366 so nach Antworten suchen war nicht hilfreich.

Interessanterweise bekomme ich diesen Fehler nicht, wenn ich die Route so ändere: <Route path="/store" component={App}/> aber das ist falsch und ich fühle mich wie der Rest der Videos auf was auch immer in den Platzhalter getippt wird. Ich möchte das Problem lösen, bevor es schlimmer wird. Ich habe das Video schon einige Male ohne Erfolg wiederholt. Hat jemand irgendwelche Ideen, mit denen ich lange nicht gearbeitet habe und ich bin mir sicher, dass ich etwas verpasst habe.

Ich schätze die Hilfe.

Antwort

0

Ich denke es liegt daran, dass Ihre Route Konfiguration falsch ist.

<Router history={history}> <Route path="/" component={StorePicker} > <Route path="store/:storeId" component={App} /> <Route /> </Router>

https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md

+0

Interessant. Wenn diese Verlaufsrequisite (?) Auf der 'Router'-Komponente angezeigt wird, wird meine App unterbrochen. Ich habe deine Lösung implementiert und es hat funktioniert, bis ich die Geschichtsstütze hinzugefügt habe. Ohne es habe ich seltsame URL-Strings, die so aussehen: 'http: // localhost: 3000/#/store/hallo? _k = 29bdba' es sieht nicht sauber aus, aber es funktioniert, aber wenn ich diese Variable einschließe, bekomme ich die 404 Fehler, ob 'route path = "store /: storeId" Komponente = {App} /> 'in der Home-Route verschachtelt ist oder nicht. Ich habe meine Frage bearbeitet, um die Variablen und Abhängigkeiten zu zeigen, die ich in diese Datei einbeziehe. – m00saca

+0

Ich hoffe, Sie werden den Link zu den Dokumenten, die ich hinzugefügt habe, besuchen. :) Sie müssen die Geschichte an Ihre Bedürfnisse anpassen. Was meine Lösung löst, ist Ihr oben aufgeführtes Problem. Mehr in der Geschichte: https://github.com/reactjs/reac-router/blob/master/docs/guides/Histories.md PS: Auch die URL-Parameter können mit History Config aufgeräumt werden. – Fraccus

+0

Besuchte den Link, aber ich habe nicht wirklich verstanden, was ich sah. Interessanterweise hat der erste Link, den Sie in Ihrer Antwort erwähnt haben, nur einmal das Wort "Geschichte" auf der Seite. Der zweite Link ist viel kryptischer. Dies ist mein erster Tag mit ReactRouter und ich weiß wirklich nicht, was ich mache. Wenn Sie sich meinen bearbeiteten Beitrag ansehen, sehen Sie folgendes: 'var createBrowserHistory = require ('history/lib/createBrowserHistory')' und es funktioniert für die Routen '/' und sogar '/ store', aber nicht'/store /: storeId' – m00saca

Verwandte Themen