Javascript react-router 位置与任何路由都不匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34837138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-router location did not match any routes
提问by Sedat KURT
I am stuck with react-router routing. I am getting the error:
我坚持使用反应路由器路由。我收到错误：
Warning: [react-router] Location "/FluxApp/" did not match any routes
This is my app.js:
这是我的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'));
My App.jslike below:
我的App.js如下所示：
var React = require('react');
var RouteHandler = require('react-router').RouteHandler;
var App = React.createClass({
render: function() {
return (
<RouteHandler />
);
}
});
module.exports = App;
My Home.jslike below:
我的Home.js如下所示：
var React = require('react');
var Home = React.createClass({
render: function() {
return (
<div>
Home
</div>
);
}
});
module.exports = Home;
Here is hieararchy of my project:
这是我的项目的层次结构：
/FluxApp
|...
+/js
. |
. +/actions
. +/constants
. +/dispatcher
. +/stores
. +/views
. . |
. . App.js
. . Home.js
. app.js
.
index.html
As you guess, I build app.jswith browserify and create bundle.jsand I am using that bundle.jsin script tag in index.html
正如您所猜测的，我使用browserify构建app.js并创建bundle.js，我在index.html 的脚本标记中使用该bundle.js
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"
},
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"
因此，当我尝试访问“ http://localhost:8080/FluxApp/”时，我总是遇到相同的错误：“警告：[react-router] 位置“/FluxApp/”与任何路由都不匹配”
How can i solve this ? Thanks.
我该如何解决这个问题？谢谢。
采纳答案by N3dst4
Your Routes don't actually specify a route for /FluxApp.
您的 Routes 实际上并没有为/FluxApp.
You'd need something like:
你需要这样的东西：
in app.js
在app.js 中
var Routes = (<Router history={browserHistory}>
<Route path="/FluxApp/" component={App}>
<IndexRoute component={Home} />
</Route>
</Router>);
in App.js
在App.js 中
var App = React.createClass({
render: function() {
return this.props.children;
}
});
回答by vikram jeet singh
React Router v4 with webpack Implementation as below
React Router v4 与 webpack 实现如下
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"
}Now run following command on terminal: npm start
现在在终端上运行以下命令：npm start
