我陷入了反应路由器路由。我收到错误消息:
Warning: [react-router] Location "/FluxApp/" did not match any routes
这是我的 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'));
我的 App.js 如下所示:
var React = require('react'); var RouteHandler = require('react-router').RouteHandler; var App = React.createClass({ render: function() { return ( <RouteHandler /> ); } }); module.exports = App;
我的 Home.js 如下所示:
var React = require('react'); var Home = React.createClass({ render: function() { return ( <div> Home </div> ); } }); module.exports = Home;
这是我的项目的层次结构:
/FluxApp |... +/js . | . +/actions . +/constants . +/dispatcher . +/stores . +/views . . | . . App.js . . Home.js . app.js . index.html
如您所 料* ,我使用 browserify 构建 app.js 并创建 bundle.js, 并且在 index.html的 脚本标记中使用了 bundle.js *
这是我在项目中使用的所有版本。
"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" },
因此,当我尝试转到“ http:// localhost:8080 / FluxApp / ”时,我总是得到相同的错误:“警告:[反应路由器]位置“ / FluxApp /”与任何路由都不匹配”
我该如何解决?谢谢。
您的路线实际上并未指定的路线/FluxApp。
/FluxApp
您将需要以下内容:
在 app.js中
var Routes = (<Router history={browserHistory}> <Route path="/FluxApp/" component={App}> <IndexRoute component={Home} /> </Route> </Router>);
在 App.js中
var App = React.createClass({ render: function() { return this.props.children; } });