前端路由的由来是利用location hash 锚点的值来跳转路由
<button id='aaa'>aaa</button> <button id='bbb'>bbb</button> <a href="#ccc">ccc</a><br/> <a href="#ddd">ddd</a> <scrtip> aaa.onclick=function(){ location.hash = 'aaa' } bbb.onclick=function(){ location.hash = 'bbb' } window.addEventListener('hashchange',function(){ var hash=location.hash.slice(1) console.log('hash to',hash); },false) </scrtip>
react-router学习教程参考 阮一峰react-router
- http://www.ruanyifeng.com/blog/2016/05/react_router.html
- 指定版本:先安装 npm install --save react-router@3.0.0
- 最新版本4.1.1跳转不过去
hashHistory 是带#号的
browser history 后面是不带#号的
没有嵌套的路由
import React from 'react'; import {Router,Route,hashHistory} from 'react-router'; const Path=React.createClass({ render(){ return( <div>path</div> ) } }) const Re = React.createClass({ render(){ return( <div> <Router history={hashHistory}> <Route path="/" component={Path}/> </Router> </div> ) } }) const RouterStudy = React.createClass({ render(){ return ( <div> <h3>react-router</h3> <Re/> </div> ) } }) export default RouterStudy;
路由的嵌套,总路由要加{this.props.children}属性
import React from 'react'; import {Router,hashHistory,borser} from 'react-router'; const App=React.createClass({ render(){ return( <div>app {this.props.children} </div> ) } }) const Repos=React.createClass({ render(){ return( <div>repos</div> ) } }) const About=React.createClass({ render(){ return( <div>about</div> ) } }) const Re = React.createClass({ render(){ return( <div> <Router history={hashHistory}> {/*嵌套路由*/} <Route path="app" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router> </div> ) } }) const RouterStudy = React.createClass({ render(){ return ( <div> <h3>react-router</h3> <Re/> </div> ) } }) export default RouterStudy;
indexRoute的实现,默认情况下加载的,相当于Index.html
const Index = React.createClass({ render:function () { return ( <div> index </div> ) } }) var R2 = React.createClass({ render:function () { return ( <Router history={hashHistory}> <Route path="/app" component={App}> <IndexRoute component={Index}/> <Route path="index" component={Index}/> <Route path="repos2" component={Repos2}/> <Route path="about2" component={About2}/> <Redirect from='error' to="index"/> </Route> </Router> ) } }) const RouteStudy = React.createClass({ render:function () { return( <div> <h3>react-router</h3> <R2/> </div> ) } })
react+ant desin + react-router
import React from 'react'; import ReactDom from 'react-dom'; import { Router,Link,IndexRoute,IndexLink }from 'react-router'; import Todo from './homework/todomvc' import Component from './homework/component' import Student from './homework/student' import { Menu,Icon,Switch,Row,Col } from 'antd'; const SubMenu = Menu.SubMenu; class Sider extends React.Component { state = { theme: 'dark',current: '1',} changeTheme = (value) => { this.setState({ theme: value ? 'dark' : 'light',}); } handleClick = (e) => { console.log('click ',e); this.setState({ current: e.key,}); //把你要匹配的值放入hashHistory里 hashHistory.push(e.key) } render() { return ( <div> <Switch checked={this.state.theme === 'dark'} onChange={this.changeTheme} checkedChildren="Dark" unCheckedChildren="Light" /> <br /> <br /> <Menu theme={this.state.theme} onClick={this.handleClick} style={{ width: 240}} defaultOpenKeys={['sub1']} selectedKeys={[this.state.current]} mode="inline" > <SubMenu key="sub1" title={<span><Icon type="mail" /><span>请选择</span></span>}> <Menu.Item key="todomvc"><Link to='todomvc'>todomvc</Link></Menu.Item> <Menu.Item key="component"><Link to="component">component</Link></Menu.Item> <Menu.Item key="student"><Link to="student">后台系统</Link></Menu.Item> </SubMenu> </Menu> </div> ); } } var R=React.createClass({ render:function(){ return( <Router history={hashHistory}> <Route path="/"> <IndexRoute component={Student}/> <Route path='todomvc' component={Todo}/> <Route path='component' component={Component}/> <Route path='student' component={Student}/> </Route> </Router> ) } }) const RouterStudy=React.createClass({ render(){ return( <div> <Row> <Col span={4}> <Sider/> </Col> <Col span={20}> <R/> </Col> </Row> </div> ) } }) export default RouterStudy;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。