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

我被反應路由器路由卡住了。我得到的錯誤：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;

這裏是我的項目hieararchy：

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

正如你猜，我建立app.js與browserify創造bundle.js，我使用bundle.js在腳本標記index.html

以下是我在項目中使用的所有版本。

"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/」我總是得到同樣的錯誤：「警告：[反應路由器]的位置‘/ FluxApp /’沒有匹配的路由」

哪有我解決這個問題？謝謝。

來源

2016-01-17 Sedat KURT

您的路線實際上並未指定路線/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; 
    } 
});

來源

2016-01-17 10:22:41 N3dst4

，如果我們改變了根文件夾的名稱會發生什麼？我們也必須改變路徑。我們可以預防嗎？ –

陣營路由器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

來源

2017-09-12 08:24:04

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

回答

相關問題