react-router 位置与任何路由都不匹配 [英] react-router location did not match any routes

问题描述

我坚持使用 react-router 路由.我收到错误:

警告:[react-router] 位置/FluxApp/"与任何路由都不匹配

这是我的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 组件={Home}/></路线></路由器>);ReactDOM.render(Routes, document.getElementById('content'));

我的 App.js 如下所示:

var React = require('react');var RouteHandler = require('react-router').RouteHandler;var App = React.createClass({渲染:函数(){返回 (<RouteHandler/>);}});module.exports = 应用程序；

我的 Home.js 如下所示:

var React = require('react');var Home = React.createClass({渲染:函数(){返回 (<div>家

);}});module.exports = 主页；

这是我的项目的层次结构:

/FluxApp|...+/js.|.+/动作.+/常数.+/调度员.+/商店.+/浏览量..|..应用程序.js..主页.js.应用程序.js.索引.html

如您所料，我使用 browserify 构建了 app.js 并创建了 bundle.js，我在脚本中使用了 bundle.jsindex.html

中的标记

这是我在项目中使用的所有版本.

依赖项":{"classnames": "^2.2.3","flux": "^2.1.1","keymirror": "^0.1.1",对象分配":^1.0.0"，反应":^0.14.6"，"react-dom": "^0.14.6",反应路由器":^ 2.0.0-rc5"},开发依赖":{"浏览": "^6.2.0","羡慕": "^3.0.0","jest-cli": "^0.4.3",反应":^0.15.2"，"uglify-js": "~2.4.15",观察":^2.1.1"},

因此，当我尝试访问http://localhost:8080/FluxApp/"时，我总是出现相同的错误:警告:[react-router] 位置/FluxApp/"与任何路由不匹配"

我该如何解决这个问题?谢谢.

解决方案

你的路由实际上并没有为 /FluxApp 指定路由.

你需要类似的东西:

在app.js

var Routes = (<Route path="/FluxApp/" component={App}><IndexRoute 组件={Home}/></路线></路由器>);

在App.js

var App = React.createClass({渲染:函数(){返回 this.props.children;}});

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:

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.js like below:

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

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

module.exports = App;

My Home.js like below:

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.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"
},

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.

解决方案

Your Routes don't actually specify a route for /FluxApp.

You'd need something like:

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;
  }
});

这篇关于react-router 位置与任何路由都不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！