0.5.13 • Published 3 years ago
@goldpage/path-to-regexp v0.5.13
Goldpage + path-to-regexp
= :heart:
@goldpage/path-to-regexp
Routing with path-to-regexp
.
(Note that @goldpage/path-to-regexp
doesn't use the npm module path-to-regexp
directly, but uses a modified version @brillout/path-to-regexp
.)
Usage
Install @goldpage/path-to-regexp
.
$ npm install @goldpage/path-to-regexp
The plugin is automatically loaded and
the route
property of your page configs is now handled by path-to-regexp
.
Example
// /examples/basics/pages/hello.page.js
import React, {useState} from 'react';
export default {
route: '/hello/:name',
addInitialProps,
view: Hello,
title,
renderToHtml: true,
};
async function addInitialProps({name}) {
// We simulate a network request delay
await sleep(0.5);
const nameReversed = name.split('').reverse().join('');
return {nameReversed};
}
function Hello({name, nameReversed}) {
const [isReversed, setReverse] = useState(false);
return (
<div>
Hello <span>{isReversed ? nameReversed : name}</span>, welcome to Goldpage.
<br/>
<button onClick={() => setReverse(!isReversed)}>Reverse name</button>
</div>
);
}
function title({name}) {
return 'Hi '+name;
}
function sleep(seconds) {
let resolve;
const promise = new Promise(r => resolve=r);
setTimeout(resolve, seconds*1000);
return promise;
}