1. 现在./src/index.js中定义路由
// npm run dev ReactDOM.render( <div> {/* 1. 未登录,需要先判断然后跳转到登录页面*/} {hashHistory.push('/login/')} {/*2.登录页面和主页的路由*/} <Router history={hashHistory}> <Route path="/login/(:path)" component={Login}/> <Route path="/app/(:path)" component={APP}/> </Router> </div>,document.getElementById('app') );
2. 在主页(app.js)中定义主页的组件间的路由
render() { return ( <div style={{width:'100%',height:'100%'}}> <LJMenu menuList={this.state.menuList} callback={this.handleChange}/> <div className='center'> <div className='sider'> <Side menuList={this.state.sideList}/> </div> <div className='content'> <Router history={hashHistory}> <Route path="/"/> <Route path="/detail/(:path)" component={Detail}/> <Route path="/about/(:path)" component={About}/> <Route path="/link/(:path)" component={Html}/> </Router> </div> </div> </div> ); } }
3.然后利用push可以自有跳转
hashHistory.push('/app/');
注意:跳转的时候注意观察地址栏中的地址是否正常
比如跳到登录页面的url包含login: http://localhost:9992/#/login/?_k=heqntx
比如跳到主页面的url包含app: http://localhost:9992/#/app/?_k=ql8jty