react-router试题
安装：
npm install -S react-router
配置：
import { Router, Route, hashHistory } from 'react-router';
<Router history={hashHistory}>{/*browserHistory、hashHistory、createMemoryHistory*/}
<Route exact path="/" component={App}> {/*exact 表⽰精确匹配*/}
<IndexRoute component={Home}/>{/*显式指定Home是根路由的⼦组件，即指定默认情况下加载的⼦组件。*/}
<IndexRedirect to="/welcome" />{/*IndexRedirect组件⽤于访问根路由的时候，将⽤户重定向到某个⼦组件。*/}
<Route path="welcome" component={Welcome} />
react router路由传参
<Route path="/repos" component={Repos}/>
<Route path="/about/(:id)" component={About}/>
<Route path="inbox" component={Inbox}>
{/*<Redirect>组件⽤于路由的跳转，即⽤户访问⼀个路由，会⾃动跳转到另⼀个路由。*/}
{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
{/* :id 获取-> this.props.params.id*/}
＜Redirect from="messages/:id" to="/messages/:id" />
</Route>
</Route>
  <Route path="*" component={Page404}></Route>
</Router>
app组件：
export ateClass({
　let baseUrl = this.props.match.url;{/*获得当前路由，即 / ，对于页⾯可维护性是⼗分重要的*/}
render() {
return (
<div>
<ul role="nav">
<IndexLink to="/" activeClassName="active">Home</IndexLink>{/*默认页*/}
<li><Link to=`/${baseUrl}/about` activeStyle={{color: 'red'}}>About</Link></li>
<li><Link to="/repos" activeClassName="active">Repos</Link></li>
        <li><Link to={{ pathname: '/hello', query: { name: 'ryan' } }}> Hello </Link></li>
        <li><Link to={`/my/${myId}/info`}>点击</Link></li>
        <li><Link to={{pathname:"/select", hash:'#ahash', query:{foo: 'bar', boo:'boz'}, state:{data:'miao'}  }} activeClassName="GlobalNav-active">精选</Link></li>            </ul>
<div>
{this.props.children} {/*this.props.children属性就是⼦组件*/}
</div>
</div>
)
}
})
path属性：
<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
<Route path="/**/*.jpg">
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg
View Code
path属性也可以使⽤相对路径（不以/开头），匹配时就会相对于⽗组件的路径。路由匹配规则是从上到下执⾏，⼀旦发现匹配，就不再其余的规则了。
编程式导航：
hashHistory
import { hashHistory } from 'React-router'
... ...
hashHistory.push('mine')
//传参
hashHistory.push({
pathname: 'good/details/'+this.state.id,//与路由表中配置相对应,
query: {
title:value.title,
name:value.name
},
})     
... ...
接收参数：
this.props.params.id
this.props.location.query.title
this.props.location.query.name
此外：
browserHistory
import { browserHistory } from 'react-router';
... ...
browserHistory.push('/some/path');
context对象
class Example extends React.Component {
constructor(props, context) {
super(props, context);
}
... ...
handleSubmit(event) {
},
}
//必须显⽰声明
router:  React.PropsTypes.object
}
路由钩⼦：
onEnter与onLeave
onEnter钩⼦替代<Redirect>组件。
<Route path="inbox" component={Inbox}>
<Route
path="messages/:id"
onEnter={
({params}, replace) => replace(`/messages/${params.id}`)
}
/
>
</Route>
onEnter钩⼦还可以⽤来做认证。
const requireAuth = (nextState, replace) => {
if (!auth.isAdmin()) {
// Redirect to Home page if not an Admin
replace({ pathname: '/' })
}
}
export const AdminRoutes = () => {
return (
<Route path="/admin" component={Admin} onEnter={requireAuth} />
)
}
当⽤户离开⼀个路径的时候，跳出⼀个提⽰框，要求⽤户确认是否离开。const Home = withRouter(
componentDidMount() {
uter.setRouteLeaveHook(
ute,
)
},
routerWillLeave(nextLocation) {
// 返回 false 会继续停留当前页⾯，
// 否则，返回⼀个字符串，会显⽰给⽤户，让其⾃⼰决定
if (!this.state.isSaved)
return '确认要离开？';
},
})
)
上⾯代码中，setRouteLeaveHook⽅法为Leave钩⼦指定routerWillLeave函数。该⽅法如果返回false，将阻⽌路由的切换，否则就返回⼀个字符串，提⽰⽤户决定是否要切换。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。