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