这是我的登录页面(App.jsx)我正在尝试在成功登录后导航到仪表板。但它没有按预期导航。我想知道是否可以从外部页面(App.jsx)导航到路由页面(Dashboard.jsx)。
import React from 'react';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {}
}
goToDashboard(e){
this.props.history.push('/employeelist');
}
render() {
return (
<div>
<form>
<div className="form-group">
<label htmlFor="email">Username:</label>
<input type="text" className="form-control" id="email" />
</div>
<div className="form-group">
<label htmlFor="pwd">Password:</label>
<input type="password" className="form-control" id="pwd" />
</div>
<button onClick={this.goToDashboard.bind(this)} className="btn btn-primary">Submit</button>
</form>
</div>
);
}
}
App.contextTypes = {
router: React.PropTypes.object.isRequired
}
这是我的信息中心页面(Dashboard.jsx)
import React from 'react';
import App from './App.jsx';
import EmployeeRegister from './EmployeeRegister.jsx';
import EmployeeList from './EmployeeList.jsx';
import {HashRouter, Route, Link} from 'react-router-dom';
export default class Dashboard extends React.Component{
render(){
return(
(
<HashRouter>
<div className="container">
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">Employee</a>
</div>
<ul className="nav navbar-nav">
<li><Link to="/">Form</Link></li>
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Master Files <span className="caret"></span></a>
<ul className="dropdown-menu">
<li><Link to="/employeereagister">CreateEmployee</Link></li>
</ul>
</li>
<li><Link to="/employeelist">Show Employees</Link></li>
</ul>
</div>
</nav>
<Route exact path="/" component={App}/>
<Route exact path="/dashboard" component={Dashboard}/>
<Route exact path="/employeereagister" component={EmployeeRegister}/>
<Route exact path="/employeelist" component={EmployeeList}/>
</div>
</HashRouter>)
);
}
};
答案 0 :(得分:0)
我会将所有内容都包含在更高阶的组件(App)中,并在App组件内部进行路由。通过这种方式,您可以更轻松地构建路径并根据需要更换子项。
或多或少这样;
<App>
<Login />
<Dashboard />
</App>