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 

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 = ();  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 (               );   } });  module.exports = App; 

My Home.js like below:

var React = require('react');  var Home = React.createClass({    render: function() {     return (       
         Home       
     );   }  });  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.

回答1:

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

You'd need something like:

in app.js

var Routes = (); 

in App.js

var App = React.createClass({   render: function() {     return this.props.children;   } }); 

回答2:

React Router v4 with webpack Implementation as below

import { BrowserRouter as Router, Route } from 'react-router-dom';  ReactDOM.render(   
       
main page
} />       
about page
} />       
contact page
} />     
   ,   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

文章来源: react-router location did not match any routes