React Route 路由跳转

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