3.0.3 • Published 7 years ago
react-router-hash v3.0.3
react-router-hash
A minimal router for react app, only supports hash url
React极简路由,仅支持hash url,可以采用两种方式进行路由配置,其中第二种配置必须在Router节点上配置sign="colon"
支持简单正则格式,例如数字,这样在组件中获取的参数也是数字
config 这三个参数都可以配置在Router根节点中
config
__root 配置根路由,也hash值为空时展示的页面
__default 配置默认路由,路由匹配失败时展示的页面,不配置时页面不跳转
__error 配置错误页面,当页面中调用this.props.toErrorPage()方法时展示的错误页面
props
__params 获取hash url的参数,例如#a?a=1 中,this.props.__params 为 a=1
其它路由参数是按别名获取,例如配置path={a}, 实际路径为/index,this.props.a的值是'index'
第一种 支持嵌套格式
render((
<Router __root={Login} __default={Login} __error={Error}> /*__root配置根地址*/
<List path="list">
<List path="/{pn:\\d+}">
</List>
<Detail path="detail/{id:\\d+}">
<Aboutus path="aboutus" >
<Aboutus path="/{a}" > /* switch a 可以根据a值在Aboutus内做逻辑操作 */
<Aboutus path="/{b}" />
</Aboutus>
<Aboutus path="/{a}/{c}/d" />
</Aboutus>
</Router>
), document.getElementById('app'));
第二种
let routers = {
'__root': Login, /* '/'配置根地址 */
'list': List,
// 'list/:pn': List,
'list/:pn(\\d+)': List,
'aboutus':Aboutus,
'aboutus/:a(\\S+)':Aboutus, // switch a 根据a值在Aboutus内做逻辑操作
'__default': Login, // default config
'__error': Error
}
render((
<Router routers={routers} sign="colon" />
), document.getElementById('app'));
Usage 用法
import Router from 'react-router-hash';
import Login from './components/Login';
import List from './components/List';
import Detail from './components/Detail';
import Aboutus from './components/Aboutus';
let routers = {
'__root': Login,
'list': List,
'list/{pn}': List,
// 'list/{pn:\\d+}': List,
'detail/{id}': Detail,
'detail/{id}/': Detail,
'aboutus':Aboutus,
'aboutus/{a:\\S+}':Aboutus,
'__default': Login,
'__error': Error
}
render((
<div>
<div>
<a href="#">login</a>
<a href="#list">list</a>
<a href="#aboutus">aboutus</a>
</div>
<Router routers={routers} />
</div>
), document.getElementById('app'));
//List.jsx
export default class List extends React.Component {
constructor(props) {
super();
// to error page
// this.props.toErrorPage();
}
render(){
// get pn value
console.log(this.props.pn)
// get hash params
console.log(this.props.params)
}
}
3.0.3
7 years ago
3.0.2
7 years ago
3.0.1
7 years ago
3.0.0
7 years ago
2.0.4
7 years ago
2.0.3
7 years ago
2.0.2
7 years ago
2.0.1
8 years ago
2.0.0
8 years ago
1.2.3
8 years ago
1.2.2
8 years ago
1.2.0
8 years ago
1.1.9
8 years ago
1.1.8
8 years ago
1.1.6
8 years ago
1.1.5
8 years ago
1.1.3
8 years ago
1.1.2
8 years ago
1.1.1
8 years ago
1.1.0
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago