react-router location hat keine Routen gefunden

Question

Ich bin mit react-Router-Routing fest. Ich erhalte die Fehlermeldung:

Warning: [react-router] Location "/FluxApp/" did not match any routes 

Das ist mein app.js:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Router = require('react-router').Router; 
var Route = require('react-router').Route; 
var IndexRoute = require('react-router').IndexRoute; 
var browserHistory = require('react-router').browserHistory; 

var App = require('./views/App'); 
var Home = require('./views/Home'); 


var Routes = (<Router history={browserHistory}> 
       <Route path="/" component={App}> 
       <IndexRoute component={Home} /> 
       </Route> 
       </Router>); 

ReactDOM.render(Routes, document.getElementById('content')); 

Mein App.js wie unten:

var React = require('react'); 
var RouteHandler = require('react-router').RouteHandler; 

var App = React.createClass({ 
    render: function() { 
    return (
     <RouteHandler /> 
    ); 
    } 
}); 

module.exports = App; 

Mein Home.js wie unten:

Hier

var React = require('react'); 

var Home = React.createClass({ 

    render: function() { 
    return (
     <div> 
     Home 
     </div> 
    ); 
    } 

}); 

module.exports = Home; 

ist hieararchy meines Projekts:

/FluxApp 
    |... 
    +/js 
    . | 
    . +/actions 
    . +/constants 
    . +/dispatcher 
    . +/stores 
    . +/views 
    . .  | 
    . .  App.js 
    . .  Home.js 
    . app.js 
    . 
    index.html 

Wie Sie sich vorstellen, ich app.js mit browserify bauen und schaffen bundle.js und ich bin mit, dass bundle.js in Script-Tag in index.html

Hier sind Versionen mein alles mit in Projekt.

"dependencies": { 
    "classnames": "^2.2.3", 
    "flux": "^2.1.1", 
    "keymirror": "^0.1.1", 
    "object-assign": "^1.0.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-router": "^2.0.0-rc5" 
}, 
"devDependencies": { 
    "browserify": "^6.2.0", 
    "envify": "^3.0.0", 
    "jest-cli": "^0.4.3", 
    "reactify": "^0.15.2", 
    "uglify-js": "~2.4.15", 
    "watchify": "^2.1.1" 
}, 

Also, wenn ich zu gehen versuchen „http://localhost:8080/FluxApp/“ Ich bekomme immer gleichen Fehler: „Warnung: [reagieren-Router] Standort‚/ FluxApp /‘wurden keine Routen“

Wie kann ich löse das? Danke.

Answer 1

Ihre Routen geben keine Route für /FluxApp an.

Sie müssen so etwas wie:

in app.js

var Routes = (<Router history={browserHistory}> 
       <Route path="/FluxApp/" component={App}> 
       <IndexRoute component={Home} /> 
       </Route> 
       </Router>); 

in App.js

var App = React.createClass({ 
    render: function() { 
    return this.props.children; 
    } 
}); 

Answer 2

Reagieren Router v4 mit webpack Implementierung wie unten

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
 

 
ReactDOM.render(
 
    <Router> 
 
    <div> 
 
     <Route exact path="/" render={() => <h1>main page</h1>} /> 
 
     <Route path="/about" render={() => <h1>about page</h1>} /> 
 
     <Route path="/contact" render={() => <h1>contact page</h1>} /> 
 
    </div> 
 
    </Router>, 
 
    document.getElementById('root')); 
 
    
 
    //webpack build script change add --history-api-fallback in package.json file 
 
    "scripts": { 
 
    "start": "webpack-dev-server --history-api-fallback" 
 
    }

nun folgenden Befehl auf Terminal laufen: npm starten