朋也的博客 » 首页 » 文章
作者:朋也
日期:2017-03-08
类别:react.js学习笔记
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
react-router版本 v4.x
跟着官网 https://reacttraining.com/react-router/ 上的example学习的
<Router>
<header>
<ul>
<li><Link to='/home'>Home</Link</li>
<li><Link to='/about'>About</Link</li>
<li><Link to='/login'>Login</Link</li>
<li><Link to='/register'>Register</Link</li>
</ul>
</header>
<section>
<Route path='/home' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/login' component={Login}/>
<Route path='/register' component={Register}/>
</section>
<footer>
balabalabala...
</footer>
</Router>
说明:当点击Link的时候,对应到Route里就显示对应的组件,section里的Route是替换的实现,也就是说,当点击/home的时候,页面section部分就只显示Home组件的内容
假如,点击List里的项,要传ID到Detail里,这时候就可以用下面的方法来实现
<Route path='/detail/:id' render={(match) => (<Detail xxId={match.params.id}/>)}/>
Detail.jsx
class Detail extends React.Component {
render() {
console.log(this.props.xxId); //可以输出List里点击传过来的值
return (<div></div>)
}
}
在V4里只能通过路由地址传值了,想传更多的值,可以借用localStorage来传
import {withRouter} from 'react-router-dom';
class ComponentA extends React.Component {
//...
_clickHandler() {
this.props.history.push('/login');
}
}
export default withRouter(ComponentA);
<div onClick={()=>this.props.history.goBack()}>返回</div>
跟v4里有些不同,下面是v2,v3里的写法
import {withRouter} from 'react-router';
class ComponentA extends React.Component {
//...
_clickHandler() {
this.context.router.push('/login')
}
_goBackHandler() {
this.context.router.goBack();
}
}
ComponentA.contextTypes = {
router: PropTypes.object.isRequired
};
export default withRouter(ComponentA);
从路由中取值:
//路由定义
<Route path='/article/:id' component={Detail}/>
//在Detail组件里取值
const {id} = this.props.params;
当从List点击去到Detail里之后,再点击浏览器的返回按钮,List组件的状态就没有了,还不知道是什么原因
补充:这个问题可以通过React-Router(v2,v3)+React-Router-Scroll来解决,详见博客:https://atjiu.github.io/2017/09/06/reactjs-router-scroll/