React Route 路由跳转

前端之家收集整理的这篇文章主要介绍了React Route 路由跳转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 现在./src/index.js中定义路由

  1. // npm run dev
  2. ReactDOM.render(
  3. <div>
  4. {/* 1. 未登录,需要先判断然后跳转登录页面*/}
  5. {hashHistory.push('/login/')}
  6. {/*2.登录页面和主页的路由*/}
  7. <Router history={hashHistory}>
  8. <Route path="/login/(:path)" component={Login}/>
  9. <Route path="/app/(:path)" component={APP}/>
  10. </Router>
  11. </div>,document.getElementById('app')
  12. );

2. 在主页(app.js)中定义主页的组件间的路由

  1. render() {
  2. return (
  3. <div style={{width:'100%',height:'100%'}}>
  4. <LJMenu menuList={this.state.menuList} callback={this.handleChange}/>
  5. <div className='center'>
  6. <div className='sider'>
  7. <Side menuList={this.state.sideList}/>
  8. </div>
  9. <div className='content'>
  10. <Router history={hashHistory}>
  11. <Route path="/"/>
  12. <Route path="/detail/(:path)" component={Detail}/>
  13. <Route path="/about/(:path)" component={About}/>
  14. <Route path="/link/(:path)" component={Html}/>
  15. </Router>
  16. </div>
  17. </div>
  18. </div>
  19. );
  20. }
  21. }

3.然后利用push可以自有跳转

  1. hashHistory.push('/app/');

注意:跳转的时候注意观察地址栏中的地址是否正常

比如跳到登录页面的url包含login: http://localhost:9992/#/login/?_k=heqntx

比如跳到主页面的url包含app: http://localhost:9992/#/app/?_k=ql8jty

猜你在找的React相关文章