react-push-state

Building the lib

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

Router.register(this, {
	'/': (state) => {

	},
	'404': (state) => {
		console.debug('called when match was not found');
	}
});

State contract

{
	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

<Link pushstate="false" page={<p>what you want to render?</p>} href="/some/path" >Some link</Link>

Using pushstate

<Link href="/some/path" >Some link</Link>

Creating a page that loads the post information and have a permanent link to be acessed anywhere

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: <p>{state.pathVar[0]}</p>});
			}
		})
	}

	componentDidMount(){
		Router.start(); // load the state at page load
	}

	render(){
		return (
		<div className="container">
			<Link title="Home" href="/posts/1/" >Post 1</Link>
			<div style={{background: "#F2F2F2", minHeight: 100, marginTop: 20}}>
				{this.state.page}
			</div>
		</div>
		)
	}
}

Page that just load another page without change URL and lost the state when page reloads

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 (
		<div className="container">
			<Link title="Home" href="/posts/1/" >Post 1</Link>
			<Link pushstate="false" page={<p>{JSON.stringify(v)}</p>} href={"/users/" + v.name.toLowerCase()} >{v.name}</Link>
			<div style={{background: "#F2F2F2", minHeight: 100, marginTop: 20}}>
				{this.state.page}
			</div>
		</div>
		)
	}
}