https://github.com/xwchris/ereact-router

simple react router implement
https://github.com/xwchris/ereact-router

Last synced: about 1 month ago
JSON representation

simple react router implement

• Host: GitHub
• URL: https://github.com/xwchris/ereact-router
• Owner: xwchris
• Created: 2018-08-27T06:51:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-19T07:37:17.000Z (about 6 years ago)
• Last Synced: 2024-11-20T03:34:49.216Z (2 months ago)
• Language: JavaScript
• Size: 1.72 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# EReact-Router

This is an simple react router which is like [react-router](https://github.com/ReactTraining/react-router)

## How to start

You can clone the repo and build with this commands.

```command

// clone

git clone [email protected]:xwchris/simple-react-router.git

cd simple-react-router

// install

npm install

// build

npm run build

```

Then, you will get `/dist/simple-react-router.js` which can be imported to you project.

## API

Like [react-router](https://github.com/ReactTraining/react-router), but [simple-react-router](https://github.com/xwchris/simple-react-router) only provide three components `BrowserRouter`, `Route` and `history`.

### BrowserRouter

#### mode

the history mode. the value can be `history` or `hash`. default `hash`

```

```

### Route

#### path

when the url pathname match the path, it will render the component

#### component

the component to be rendered if matched

#### exact

only match if url pathname equals path. default `false`

```

// Person is and React Component

```

### Link

#### to

the path you want to navigate

```

click me

```

### Usage

Here is a [live example](https://codepen.io/xwchris/pen/PdNyJQ) of simple-react-router

```reactjs

// react home.js

import React from 'react';

import { BrowserRouter, Route, Link } from 'simple-react-router';

const Test = () => 
Test Page
;


const Mine = ({ match }) => 
Mine Page {match.params.id}
;


const Result = () => 
Result Page
;


class Home extends React.Component {

  render() {

    return (

      


        

          


            
Test

            
Mine

            
Mine

            
result

          


          


            

            

            

          

        

      

    );

  }

}


export default Home;

```