前端那些事之react篇---router路由
发布时间:2020-12-15 07:25:05 所属栏目:百科 来源:网络整理
导读:前端路由的由来是利用location hash 锚点的值来跳转路由 button id='aaa'aaa/button button id='bbb'bbb/button a href="#ccc"ccc/abr/ a href="#ddd"ddd/a scrtip aaa.onclick=function(){ location.hash = 'aaa' } bbb.onclick=function(){ location.hash
前端路由的由来是利用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
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.htmlconst 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-routerimport 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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |