react-router使用总结
基本用法安装命令: $ npm install -S react-router 使用展示: import { Router } from 'react-router'; render(<Router/>,document.getElementById('app')); Router组件本身只是一个容器,真正的路由要通过Route组件定义。 import { Router,Route,hashHistory } from 'react-router'; render(( <Router history={hashHistory}> <Route path="/" component={App}/> </Router> ),document.getElementById('app')); 代码解释:
嵌套路由
<Router history={hashHistory}> <Route path="/" component={App}/> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Router> 上面代码中,用户访问 <App> <Repos/> </App> App组件要写成下面的样子。 export default React.createClass({ render() { return <div> {this.props.children} </div> } }) 上面代码中,App组件的 子路由也可以不写在 let routes = <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route>; <Router routes={routes} history={browserHistory}/> path属性
<Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route> 上面代码中,当用户访问 如果省略外层 <Route component={Inbox}> <Route path="inbox/messages/:id" component={Message} /> </Route> 通配符<Route path="/hello/:name"> // 匹配 /hello/michael // 匹配 /hello/ryan <Route path="/hello(/:name)"> // 匹配 /hello // 匹配 /hello/michael // 匹配 /hello/ryan <Route path="/files/*.*"> // 匹配 /files/hello.jpg // 匹配 /files/hello.html <Route path="/files/*"> // 匹配 /files/ // 匹配 /files/a // 匹配 /files/a/b 通配符规则:
常用组件IndexRoute上面的代码会发现访问根路径会加载不到子组件。 <Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router>
Redirect
<Route path="inbox" component={Inbox}> {/* 从 /inbox/messages/:id 跳转到 /messages/:id */} <Redirect from="messages/:id" to="/messages/:id" /> </Route> IndexRedirect
<Route path="/" component={App}> <IndexRedirect to="/welcome" /> <Route path="welcome" component={Welcome} /> <Route path="about" component={About} /> </Route> RouterContext
Link
render() { return <div> <ul role="nav"> <li><Link to="/about">About</Link></li> <li><Link to="/repos">Repos</Link></li> </ul> </div> } 如果希望当前的路由与其他路由有不同样式,这时可以使用 <Link to="/about" activeStyle={{color: 'red'}}>About</Link> <Link to="/repos" activeStyle={{color: 'red'}}>Repos</Link> 另一种做法是,使用 <Link to="/about" activeClassName="active">About</Link> <Link to="/repos" activeClassName="active">Repos</Link> IndexLink如果链接到根路由 这是因为对于根路由来说, <IndexLink to="/" activeClassName="active"> Home </IndexLink> 另一种方法是使用 <Link to="/" activeClassName="active" onlyActiveOnIndex={true}> Home </Link> 实际上, history
import createHashHistory from 'history/lib/createHashHistory' const history = useRouterHistory(createHashHistory)({ queryKey: false }) 表单处理
<form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <button type="submit">Go</button> </form> 第一种方法是使用 import { browserHistory } from 'react-router' // ... handleSubmit(event) { event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path) } 第二种方法是使用 export default React.createClass({ // ask for `router` from context contextTypes: { router: React.PropTypes.object },handleSubmit(event) { // ... this.context.router.push(path) },}) 常见配置方案React.render(( <Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route> </Route> </Router> ),document.body) | URL | 组件| 添加首页React.render(( <Router> <Route path="/" component={App}> {/* 当 url 为/时渲染 Dashboard */} <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route> </Route> </Router> ),document.body)
让 UI 从 URL 中解耦出来React.render(( <Router> <Route path="/" component={App}> <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> {/* 使用 /messages/:id 替换 messages/:id */} <Route path="/messages/:id" component={Message} /> </Route> </Route> </Router> ),document.body)
兼容旧的 URL现在任何人访问 /inbox/messages/5 都会看到一个错误页面。 import { Redirect } from 'react-router' React.render(( <Router> <Route path="/" component={App}> <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="/messages/:id" component={Message} /> {/* 跳转 /inbox/messages/:id 到 /messages/:id */} <Redirect from="messages/:id" to="/messages/:id" /> </Route> </Route> </Router> ),document.body) 替换的配置方式const routeConfig = [ { path: '/',component: App,indexRoute: { component: Dashboard },childRoutes: [ { path: 'about',component: About },{ path: 'inbox',component: Inbox,childRoutes: [ { path: '/messages/:id',component: Message },{ path: 'messages/:id',onEnter: function (nextState,replaceState) { replaceState(null,'/messages/' + nextState.params.id) } } ] } ] } ] React.render(<Router routes={routeConfig} />,document.body)
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |