https://github.com/liuhong1happy/similar-react-router

similar react-router
https://github.com/liuhong1happy/similar-react-router

react react-router similar-react-router

Last synced: 18 days ago
JSON representation

similar react-router

• Host: GitHub
• URL: https://github.com/liuhong1happy/similar-react-router
• Owner: liuhong1happy
• License: mit
• Created: 2016-10-30T10:36:39.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T08:44:10.000Z (almost 8 years ago)
• Last Synced: 2024-10-07T00:34:56.302Z (about 1 month ago)
• Topics: react, react-router, similar-react-router
• Size: 14.6 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# similar-react-router

[![Version](https://img.shields.io/npm/v/similar-react-router.svg)](https://www.npmjs.com/package/similar-react-router)

[![Downloads](https://img.shields.io/npm/dt/similar-react-router.svg)](https://www.npmjs.com/package/similar-react-router)

similar react-router

## 安装

	npm install --save similar-react-router

## 用法

``` js

var React = reqiure('react');

var {Link,Route,Router,RouteHistory} = reqiure('simple-react-router');

var RootComponent = (props)=>{

    return (


        
This is RootComponent!

        


            


                首页

            

            


                列表页

            

            


                详情页

            

            


                其它页面

            

        

        
{props.children}

    
)

}


var HomePage = (props)=>{

	return (
{props.children}
)

}


var OtherPage = (props)=>{

	return (
{"This is "+props.name+" page!"}
)

}


var HomeIndexPage = ()=>{

    return (


        This is HomeIndexPage!

    
)

}


var HomeListPage = ()=>{

    return (


        This is HomeListPage!

    
)

}


var HomeDetailPage = (props)=>{

    return (


        This is HomeDetailPage!

    
)

}


class RouterApp extends React.Component {

	render(){

		return (

			

				

					

					

					

				

				

			

		)

	}

}

```

## 示例项目

- [react-umeditor-example](https://github.com/liuhong1happy/react-umeditor-example)

## API

- Router 定义根路由，指定defaultRoute(默认路由)

    - path 路由名称，这里指定为"/" `String`

    - component 路由对应的组件 `React.Component`

    - defaultRoute 默认路由 `String`

- Route 定义路由，可包含子路由，允许定义[:id]格式路由，默认允许传递[?id=xxx]方式

    - path 路由名称，这里指定为"/" `String`

    - component 路由对应的组件 `React.Component`

    - children 子路由 `Array or `

- Link 简单路由链接

    - to 跳转到的路由名称 `String`

    - onClick 路由点击回调函数，内部已经实现路由跳转 `Function`

    - anchor 是否渲染为a标签，否则就是span标签 `Boolean`

- RouteHistory 路由操纵，注意以下是属性或者方法，非props。

    - pushHash 跳转 `Function`

    - curHash 当前路由 `String`

## 特点

1. similar-react-router采用ES6写法，推荐使用webpack打包，loader采用babel-loader。

2. require引入react方式，可以兼容IE8。

3. 高度模仿react-router组件，采用hash实现，使用便捷。

4. 可以在redux中使用，看[这里](examples/redux)。

## 联系方式

Email: [liuhong1happy]([email protected])