这是我的登录页面(App.jsx)我正在尝试在成功登录后导航到仪表板.但它没有按预期导航.我想知道是否可以从外部页面(App.jsx)导航到路由页面(Dashboard.jsx). import React from 'react';import createHi
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>) ); } };我将所有内容都包含在更高阶的组件(App)中,并在App组件内部进行路由.通过这种方式,您可以更轻松地构建路径并根据需要换出子项.
或多或少这样;
<App> <Login /> <Dashboard /> </App>