react-router位置与任何路由都不匹配 [英] react-router location did not match any routes
问题描述
我被反应路由器路由困住了。我收到错误:
I am stuck with react-router routing. I am getting the error:
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;
这是我的项目的hieararchy:
Here is hieararchy of my project:
/FluxApp
|...
+/js
. |
. +/actions
. +/constants
. +/dispatcher
. +/stores
. +/views
. . |
. . App.js
. . Home.js
. app.js
.
index.html
正如您猜测的那样,我构建了 app.js 使用browserify创建 bundle.js ,我在 index.html
As you guess, I build app.js with browserify and create bundle.js and I am using that bundle.js in script tag in index.html
以下是我在项目中使用的所有版本。
Here are versions my everything using in project.
"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 / 时得到总是相同的错误:警告:[react-r外部位置/ FluxApp /与任何路线都不匹配
So, when I try to go to "http://localhost:8080/FluxApp/" I get always same error : "Warning: [react-router] Location "/FluxApp/" did not match any routes"
我该如何解决这个问题?
谢谢。
How can i solve this ? Thanks.
推荐答案
您的路线实际上没有为 / FluxApp <指定路线/ code>。
Your Routes don't actually specify a route for /FluxApp
.
您需要应用中的类似:
You'd need something like:
。 js
in 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;
}
});
这篇关于react-router位置与任何路由都不匹配的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!