https://github.com/mageddo/react-push-state
https://github.com/mageddo/react-push-state
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mageddo/react-push-state
- Owner: mageddo
- Created: 2017-11-08T15:00:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T21:37:31.000Z (over 8 years ago)
- Last Synced: 2025-03-27T23:30:21.561Z (about 1 year ago)
- Language: JavaScript
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Building the lib
```bash
docker-compose up -d --force-recreate rps-compiler &&\
docker exec -it rps-compiler sh -c 'npm install && npm run build' &&\
docker-compose stop rps-compiler
```
It will generate the transpiled javascript at build folder
### Examples
#### State callback
```javascript
Router.register(this, {
'/': (state) => {
},
'404': (state) => {
console.debug('called when match was not found');
}
});
```
#### State contract
```javascript
{
title: '', // page title
path: '', // push state path
page: null, // page to be render when pushstate is false in Link tag
pathVar: [1, 'b'], // group values in path
query: URLSearchParams // query string object
}
```
#### Link
If you just want to transitate from a page to another without use pushstate
```html
what you want to render?} href="/some/path" >Some link
```
Using pushstate
```html
Some link
```
#### Creating a page that loads the post information and have a permanent link to be acessed anywhere
```javascript
import React from 'react';
import Router, {Link} from "./route/Router.js"
class App extends React.Component {
constructor(){
super();
this.state = {}
Router.register(this, {
'^/posts/(\\d+)' : (state) => {
this.setState({page:
{state.pathVar[0]}
});
}
})
}
componentDidMount(){
Router.start(); // load the state at page load
}
render(){
return (
Post 1
{this.state.page}
)
}
}
```
#### Page that just load another page without change URL and lost the state when page reloads
```javascript
import React from 'react';
import Router, {Link} from "./route/Router.js"
class App extends React.Component {
constructor(){
super();
this.state = {};
Router.register(this, {});
}
/**
* This method will be called when a Link without pushState was clicked, then you will receive in state.page a page to render
*/
load(state){
console.debug('m=App.load, state=%o', state);
this.setState({page: state.page});
}
componentDidMount(){
Router.start(); // load the state at page load
}
render(){
return (
Post 1
{JSON.stringify(v)}} href={"/users/" + v.name.toLowerCase()} >{v.name}
{this.state.page}
)
}
}
```