export default class App extends Component { constructor(){ super() this.state={ } } render() { return ( <Router> <div> <h1>App</h1> <ul> <li> <Link to="/home">Home</Link></li> {/* 同样 这两个link让他们转移到Home中 我们的home组件就变成了下面的样子 */} </ul> <Route path="/home" component={Home} > {/*<Route path="children1" component={Children} />*/} {/*<Route path="children2" component={ChildrenTwo} />*/} {/*先把这里注释掉 然后我们来到Home组件内*/} </Route> </div> </Router> ) } } // home内部用{this.props.match.url+子路由路径}来获取当前的路径并且加上我们要路由到的位置来进行路由匹配和路径跳转匹配 这样书写 Children和ChildrenTwo就是home的子路由了 class Home extends Component{ constructor(){ super() } render(){ return( <div> <h1>我是Home</h1> <li><Link to={`${this.props.match.url}/children1`}>children1</Link></li> <li><Link to={`${this.props.match.url}/children2`}>children2</Link></li> <Route path={`${this.props.match.url}/children1`} component={Children} /> <Route path={`${this.props.match.url}/children2`} component={ChildrenTwo} /> </div> ) } }
路由跳转
声明式跳转上面已经说过了 Link和NavLink 两个标签就可以满足了 我们主要说一下js跳转
在4.0刚刚发布的时候 this.props.history.push('路径')这个方法已经行不通了，不过值得庆幸的是，我现在所使用的4.3.1版本又可以使用这个方法来进行js路由跳转了。
我们用home组件来举个例子
class Home extends Component{ constructor(){ super() } toPath=(home)=>{ console.log(123) this.props.history.push({ //我们把要传参的东西都放在push对象内了 pathname:home, //我们要到达哪个路由 search:"?a=1", //明文传参的模式 query:{'type':'type'}, //query对象传参 state:{ //state对象传参 b:456 } }) // this.props.history.push('/123') } render(){ return( <div> <h1 onClick={()=>{this.toPath(`${this.props.match.url}/children1/123`)}}>我是Home</h1> <li><Link to={`${this.props.match.url}/children1`}>children1</Link></li> <li><Link to={`${this.props.match.url}/children2`}>children2</Link></li> <Route path={`${this.props.match.url}/children1/:id`} component={Children} /> <Route path={`${this.props.match.url}/children2`} component={ChildrenTwo} /> </div> ) } } /*相应的 我们在Children 组件里面有对应的方法来获取参数。*/ class Children extends Component{ constructor(){ super() this.state={ } } render(){ console.log(this.props.match.params.id) //这种是通过路径上面的:id传过来的参数 console.log(this.props.location.query) //这是通过push的参数对象中的query传过来的 和vue的query有区别 它不在地址栏 刷新丢失 console.log(this.props.location.state) //这是通过push的参数对象中的state传过来的 它不在地址栏 刷新丢失 console.log(this.props.location.search) //暴露在地址栏，需要自行处理获取数据 return( <div> <h1>我是子组件1 </h1> </div> ) } }
总结
这一期我们主要还是讲了react-router4.x的基础使用和传参方法，react-router4.x坑比较多，不过使用熟练了会让你感觉很爽，大家不要吝啬自己的时间多多学习。