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

IT技术 javascript reactjs react-router
2021-04-11 06:19:36

我坚持使用react-router路由。我收到错误：

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/ ”时，我总是遇到相同的错误：“警告：[react-router] 位置“/FluxApp/”与任何路由都不匹配”

我该如何解决这个问题？谢谢。

2个回答

您的 Routes 实际上并未指定/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;
  }
});
如果我们更改根文件夹名称会发生​​什么？我们也必须改变路径。我们可以预防吗？
2021-06-02 06:19:36

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

现在在终端上运行以下命令：npm start

其它你可能感兴趣的问题
上一篇将本机传递函数作为propsreact到子组件 下一篇如何在typescript中为无状态react组件定义 defaultProps？