试着用React写项目-利用react-router解决跳转路由等问题
Posted gavanwanggw
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了试着用React写项目-利用react-router解决跳转路由等问题相关的知识,希望对你有一定的参考价值。
转载请注明出处:王亟亟的大牛之路
这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (总有你须要的东西)
上一篇讲到我们能够利用 Router来实现嵌套跳转等效果,可是那些都是静态的,这一篇着重于写一些动态跳转内容
Link
之前也有提及。旧时代我们经常使用的跳转形式就是<a/>
,React丰富的api也提供给我们相似的实现。那就是Link
,我们用一个样例来看一下这玩意怎么用
他也是react-router
包里的一部分,先 import
import { Link } from ‘react-router‘
然后就能够正常使用了,像这样
import React from ‘react‘
import { Link } from ‘react-router‘
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<Link to="/Three">Three</Link><br></br>
<Link to="/Three">Three</Link>
</ul>
</div>
)
}
})
效果例如以下
当然。之前注冊的<Route>
不能少,不然无法进行跳转
main.js的片段
<Route path="/Three" component={Three}/>
<Route path="/Two" component={Two}/>
activeStyle activeClassName
activeStyle 能够帮我们改变链接的样式。使用简单配一个属性就可以。像这样
<Link to="/Two" activeStyle={{color: ‘red‘}}>Two</Link>
上面代码中,当前页面的链接会红色显示
还有个字段是activeClassName 指定当前路由的Class
像这样
<Link {...this.props} activeClassName="active"/>
那既然 相似的使用场景非常多。为何不封装一个组件。方便调用?
ok,我们新建一层文件夹,像这样
里面放一个专门处理跳转的NavLink.js对<Link>
进行一些简单的封装
import React from ‘react‘;
import { Link } from ‘react-router‘;
export default React.createClass({
render() {
return (<Link {...this.props} activeClassName="active"/>)
}
})
非常easy让我们能传參。统一设置activeClassName,当然你想自己定义怎么都能够
URL Params
有些时候我们会碰到一些非常像但又不是全然不同的路由,像这样
/Three/haha
/Three/haha/haha1
/Three/hehe/hehe1
官方提供给我们一个 以: 开头的配对形式。像这样
/Three/:haha/:haha1
我们 拿
/Three
/Three/haha
做个演示案例
由于是分层渲染,所以Three/haha就要交给第三方黑暗势力去展示。而Three还是给Three
所以我们的main.js,如今长这样
import React from ‘react‘;
import { render } from ‘react-dom‘;
import { Router , Route , hashHistory , Link } from ‘react-router‘;
import First from ‘./First‘;
import Three from ‘./Three‘;
import Two from ‘./Two‘;
import Four from ‘./Four‘;
render((
<Router history={hashHistory}>
<Route path="/" component={First}>
</Route>
<Route path="/Three" component={Three}/>
<Route path="/Three/:name" component={Four}/>
<Route path="/Two" component={Two}/>
</Router>
), document.getElementById(‘app‘))
Four就是我们新加入渲染的组件,内容不用管。你得理解Three和Three/:name实质上并非同一个东西可是他属于同一种匹配规则。而这规则匹配后都将被Four去渲染
Four.js
import React from ‘react‘;
export default React.createClass({
render(){
return (
<div>
<h2>{this.props.params.name}</h2>
</div>
)
}
})
这里接受一个传递来的name属性,把它显示出来。值是跳转传来的
我们让 第三个页面产生多级跳转到,更改例如以下
import React from ‘react‘;
import styled from ‘styled-components‘;
import NavLink from ‘./../component/nav/NavLink‘;
const H2 = styled.h2`
color: #eee
`;
export default React.createClass({
render(){
return (
<div>
<h2>hi i am three</h2>
<ul>
<NavLink to="/Three/haha">haha</NavLink><br></br>
<NavLink to="/Three/heihei">heihei</NavLink>
</ul>
</div>
)
}
})
先导包把刚才自己创建的主件给“抠来用“
import NavLink from ‘./../component/nav/NavLink‘;
然后分别进行路由配置,一个传haha一个heihei,我们来看下Four有没有对应效果,先看看Three
我们点一下haha
url,值都显示出了我们已经得到了传来的haha
下一篇将是Router的完结篇,总体是从官方demo入手加以自己的理解和尝试,有问题或者有疑问能够给我留言,谢谢。
以上是关于试着用React写项目-利用react-router解决跳转路由等问题的主要内容,如果未能解决你的问题,请参考以下文章
试着用React写项目-利用styled-components解决样式问题
利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载
脚手架初始化 react 项目 react-router 路由