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

有一個登錄組件。我的應用程序入口點是登錄頁面。登錄成功後，移至主頁面（儀表板&導航）。成功登錄主頁後顯示導航組件和儀表板，但導航不起作用。我得到的錯誤：react-router位置與任何路由不匹配

反應路由器的位置「/例子」沒有匹配的路由反應路由器的位置「/儀表板」沒有匹配的路由

我的登錄組件是

var React = require('react'); 
var {Link} = require('react-router'); 
var Dashboard = require('Dashboard'); 

var Login = React.createClass ({ 
onFormSubmit: function(e){ 
    e.preventDefault(); 
    window.location.href = '/main' 
}, 
render: function(){ 
return (
<div> 
<h1 className="text-center">Login</h1> 
    <form onSubmit={this.onFormSubmit}> 
    <input type="text" ref="username"/> 

    <button className="button">Login</button> 
    </form> 
</div> 
) 
} 
}); 

module.exports = Login;

我的儀表盤組件

var React = require('react'); 
var Nav = require('Nav'); 

var Dashboard = (props) => { 
    return (
    <div> 
     <h1> Dashboard</h1> 
    </div> 
    </div> 
); 
} 

module.exports = Dashboard;

主要成分Main.jsx

var React = require('react'); 
var Nav = require('Nav'); 

var Main = (props) => { 
    return (
    <div> 
     <h1> Main</h1> 
    <Nav/> 
    <div className="row"> 
    <div className="columns medium-6 large-4 small-centered"> 
     {props.children} 
    </div> 
    </div> 
    </div> 
    ); 
    } 

    module.exports = Main;

主要app.jsx文件

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, browserHistory} = require('react- router'); 
var Login = require('Login'); 
var Dashboard = require('Dashboard'); 
var About = require('About'); 
var Examples = require('Examples'); 
var Main = require('Main'); 


require('style!css!foundation-sites/dist/foundation.min.css') 
$(document).foundation(); 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={Login}/> 
    <Route path="/main" component={Main}> 
     <Route path="about" component={About}/> 
     <Route path="examples" component={Examples}/> 
     <IndexRoute component={Dashboard}/> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
);

我server.js文件：

var express = require('express'); 

// Create our app 
var app = express(); 

app.get(['/', '/main'], function(req, res){ 
res.sendfile('./public/index.html') 
}); 


app.use(express.static('public')); 

app.listen(3000, function() { 
    console.log('Express server is up on port 3000'); 
});

來源

2016-10-03 user2194838

你宣佈你的應用程序的路線，像這樣：

<Route path="/main" component={Main}> 
    <Route path="about" component={About}/> 
    <Route path="examples" component={Examples}/> 
    <IndexRoute component={Dashboard}/> 
</Route>

所以你應該使用：

/main/examples 
/main/dashboard

代替：

/examples 
/dashboard

來源

2016-10-03 19:32:44

我試過/主/例子， /主/儀表板。仍然沒有工作 – user2194838

如果我的根路徑有一個像「/ main /：some_id」這樣的uri參數？ –

我們正面臨同樣的問題，只需添加/ main/eqv。沒有幫助。任何人解決了這個？ – svante

至於我可以告訴你路由到/main在登錄這就是爲什麼你Dashboard和Main頁是否正常運行。如果你想查看examples頁面，你需要重定向到/main/examples，如果about然後/main/about。你也應該總是使用react-router API重定向。退房this答案找出如何以編程方式使用重定向反應路由器

來源

2016-10-04 05:18:01

陣營路由器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" 
 
    } 
 
    
 
    Now run following command on terminal: npm start

來源

2017-09-12 08:22:02

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

回答

相關問題