有一个登录组件 . 我的应用程序入口点是登录页面 . 成功登录后,移至主页面(仪表板和导航) . 成功登录后,主页面显示导航组件和仪表板 . 但导航不起作用 . 我收到错误:
react-router位置“/ examples”与任何路由无法匹配 - 路由器位置“/ dashboard”与任何路由都不匹配
我的登录组件是
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');
});
3 回答
您声明了您的应用程序路由如下:
所以你应该使用:
代替:
据我所知,你在登录时路由到
/main
这就是你的Dashboard
和Main
页面工作的原因 . 如果要查看examples
页面,则需要重定向到/main/examples
,如果about
,则需要/main/about
. 此外,您应始终使用react-router
API重定向 . 查看this answer以了解如何使用react-router以编程方式重定向使用webpack实现React Router v4,如下所示