react-router使用教程
安装命令npm install -S react-router 基本用法使用时,路由器Router就是React的一个组件,Router组件本身只是个容器,真正的路由要通过Route组件定义 import React from 'react'; import ReactDOM from 'react-dom'; import {Router,Route,hashHistory} from 'react-router'; import App from './App.jsx'; import About from './About.jsx'; ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={App}/> <Route path="/about" component={About}/> </Router>,document.getElementById('app')) 路由模式Router组件的history属性,用来监听浏览器地址栏的变化,并将URL解析成一个地址对象,供React Router匹配,history一个可以设置三个值
如果设为
"scripts": { "dev": "webpack-dev-server --history-api-fallback --hot","build": "webpack --progress --hide-modules" }, 如果设为
const history = createMemoryHistory(location) 嵌套路由Route组件还可以嵌套 ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={Layout}> <Route path="/index" component={App}/> <Route path="/about" component={About}/> </Route> </Router>,document.getElementById('app')) 上面代码中,用户访问/index或/about时候会先加载Layout组件,然后在Layout组件内部加载App或Abot,为此Layout组件需要加个 {this.props.children} import React from "react" export default React.createClass({ render(){ return ( <div> <ul> <li><Link to="index">Index</Link></li> <li><Link to="about">About</Link></li> </ul> {this.props.children} </div> ) } }) 上面代码中,{this.props.children} 代表子组件 子路由也可以不写在Router组件里面,单独传入Router组件的routers属性 import React from 'react'; import ReactDOM from 'react-dom'; import {Router,hashHistory,browserHistory,createMemoryHistory} from 'react-router'; import Layout from './Layout.jsx'; import App from './App.jsx'; import About from './About.jsx'; let routes = <Route component={Layout}> <Route path="/" component={App} /> <Route path="/about" component={About} /> </Route> ReactDOM.render( <Router routes={routes} history={browserHistory}></Router>,document.getElementById('app')) path属性Route组件的path属性指定路由的匹配规则,这个属性是可以省略,这样的话,不管路径是否匹配,总是会加载指定组件。 <Route path="home" component={Layout}> <Route path="index" component={App} /> <Route path="about(/:name)" component={About} /> </Route> 上面的例子中当用户访问/home/about/map 的时候,会加载下面的组件 <Layout> <About /> </Layout> 如果省略外层Route的path参数,写成下面的样子 <Route component={Layout}> <Route path="index" component={App} /> <Route path="about/:name" component={About} /> </Route> 现在访问/about/test的时候会加载下面的组件 <Layout> <About /> </Layout> 通配符path属性可以使用通配符 <Route path="/hello/:name"> 匹配 /hello/michael <Route path="/hello(/:name)> 匹配 /hello | /hello/test <Route path="/hello/*.*> 匹配 /hello/a.jpg <Route path="/hello/*> 匹配 /hello/ | /hello/test <Route path="/**/*.jpg> 匹配 /hello/a.jpg | /hello/path/to/a.jpg 通配符规则如下
<Route path="/hello" component="Hello"> <Route path="/hello" component="About"> 上面的代码中,路径 <Route> <Route path="/:userName/:id" component="Hello"> <Route path="/about/me" component="About"> </Route> 上面的代码中,用户访问 此外,URL的查询字符串 IndexRoute 组件IndexRoute组件是为了解决默认情况下根路由的子组件问题的 <Router history={hashHistory}> <Route path="/" component={Layout}> <IndexRoute component={Index} /> <Route path="app" component={App} /> <Route path="about(/:name)" component={About} /> </Route> </Router> 上面代码中,访问根路径 注意:IndexRoute组件没有路径参数path Redirect 组件Redirect组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由 <Route path="/" component={Layout}> <Redirect from="/foo" to="/404" /> <Route path="404" component={U404} /> <Route path="app" component={App} /> <Route path="about(/:name)" component={About} /> </Route> 现在访问 IndexRedirect 组件IndexRedirect 组件用于访问根路由的时候,讲用户重定向到某个子路由 <Route path="/" component={Layout}> <IndexRedirect to="/404" /> <Route path="404" component={U404} /> <Route path="app" component={App} /> <Route path="about(/:name)" component={About} /> </Route> 上面代码中,用户访问根路径时,将自动重定向到子路由中 Link
<ul> <li><Link to="/">Index</Link></li> <li><Link to="app">App</Link></li> <li><Link to="about/ggg">About</Link></li> </ul> 如果希望当前的路由与其他路由有不同样式,这时可以使用Link组件的activeStyle属性 <li><Link to="app" activeStyle={{color:'red'}}>App</Link></li> <li><Link to="about" activeStyle={{color:'red'}}>About</Link></li> 上面代码中,当前页面的链接会红色显示。 另一种做法是,使用 <li><Link to="app" activeClassName="active">App</Link></li> <li><Link to="about" activeClassName="active">About</Link></li> 上面代码中,当前页面的链接会红色显示。 在 import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 或者这样 this.context.router.push('/some/path') IndexLink如果链接到根路由 这是因为对于根路由来说, <IndexLink to="/" activeStyle={{color:'red'}}>Index</IndexLink> 上面代码中,根路由只会在精确匹配时,才会变成红色 另一种方法是使用 <Link to="/" activeStyle={{color:'red'}} onlyActiveOnIndex={true}>Index</Link> 实际上, 路由的钩子每个路由都有Enter和Leave钩子,用户进入或离开该路由时触发。 上面的例子中,用户进入 import React from 'react'; import ReactDOM from 'react-dom'; import {Router,IndexRoute,hashHistory} from 'react-router'; import Layout from './Layout.jsx'; import App from './App.jsx'; import Index from './Index.jsx'; import About from './About.jsx'; import NotFound from './NotFound.jsx'; const beforeRouter = (nextState,replace)=>{ console.log("beforeRouter",nextState,replace) } const afterRouter = (nextState,replace)=>{ console.log("afterRouter",replace) } ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Layout}> <IndexRoute component={Index} /> <Route path="app" component={App} onEnter={beforeRouter} onLeave={afterRouter} /> <Route path="about(/:name)" component={About} /> <Route path="*" component={NotFound} /> </Route> </Router>,document.getElementById('app')) 本文摘自阮一峰的博客 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |