web-dev-qa-db-fra.com

react-router location ne correspond à aucun itinéraire

Je suis coincé avec le routage de réaction-routeur. Je reçois l'erreur: 

Warning: [react-router] Location "/FluxApp/" did not match any routes

Ceci est mon 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'));

Mon App.js comme ci-dessous:

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

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

module.exports = App;

Mon Home.js comme ci-dessous:

var React = require('react');

var Home = React.createClass({

  render: function() {
    return (
      <div>
        Home
      </div>
    );
  }

});

module.exports = Home;

Voici la hiérarchie de mon projet:

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

Comme vous le devinez, je construis app.js avec browserify et crée bundle.js et j’utilise ce bundle.js dans une balise de script dans index.html

Voici les versions de mon tout utilisant dans le projet.

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

Donc, quand j'essaie d'aller à " http: // localhost: 8080/FluxApp/ " j'obtiens toujours la même erreur: "Attention: l'emplacement de [react-router]"/FluxApp/"ne correspond à aucun itinéraire"

Comment puis-je résoudre ce problème? Merci.

javascriptreactjsreact-router
8
Sedat KURT

En réalité, vos itinéraires ne spécifient pas d'itinéraire pour /FluxApp.

Vous aurez besoin de quelque chose comme:

dans app.js 

var Routes = (<Router history={browserHistory}>
               <Route path="/FluxApp/" component={App}>
                <IndexRoute component={Home} />
               </Route>
              </Router>);

dans App.js 

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

Réagissez Routeur v4 avec WebPack Implémentation comme ci-dessous

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

Maintenant, lancez la commande suivante sur le terminal: npm start 

0
vikram jeet singh