javascript – react-router位置与任何路由都不匹配

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – react-router位置与任何路由都不匹配，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2098字，纯文字阅读大概需要3分钟。

内容图文

我被反应路由器路由困住了.我收到错误：

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：

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

正如您猜测的那样,我使用browserify构建app.js并创建bundle.js,我在index.html的script标签中使用了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/”时,我总是得到同样的错误：“警告：[react-router]位置”/ 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;
  }
});

内容总结

以上是互联网集市为您收集整理的javascript – react-router位置与任何路由都不匹配全部内容，希望文章能够帮你解决javascript – react-router位置与任何路由都不匹配所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---