async-react-router
Async-react-router is react router that can easily get initial props using async/await or promise.
If you use this library, You can get the initial props like Next.js.
And this library works only on client also.
Version
Version | React | RxJS | README |
---|---|---|---|
2.0 | 15.X or 16.X | 6.X | Link |
1.0 | 15.X or 16.X | 5.X | Link |
In order to correspond to dynamic import, v2 has breaking change from v1.
Features
- Support
getInitialProps()
like Next.js. - Support only on client-side.
- Support sever-side rendering.
- Support URL parameters.
- Support history package. The following history type is supported.
- Hash history
- Browser history
- Memory history
- Support dynamic import.
- No depend on react-router.
Demo
- Basic Example.
- Redux Example.
- Flux Utils Example.
- Server-side rendering (only example source)
Installation
Async-react-router has peer dependencies of rxjs@6.x.x which will have to be installed.
npm install async-react-router react react-dom rxjs --save
Example
;;; { return ;} Component static { console; } static async { await ; return message: 'Home is five second sleep.' ; } static { console; } { return <div> <h2>Home</h2> <dl> <dt>Message</dt> <dd>thispropsmessage</dd> </dl> <ul> <li><Link to="/page">Page Index</Link></li> <li><Link to="/page/1">Page 1</Link></li> </ul> </div> ; }; const router = ;router;router;
API
createRouter()
createRouter()
generates router instance. Default history type is Hash history.
; const router = ;
If you want to change history type to browser history or memory history, you can define below.
// Browser history;const router = ; // Memory history;const router = ;
router.route(path, component, name)
Route links a path and a component.
path
- Any valid URL path that path-to-regexp understands. Required.component
- A react component to render only when the location matches. Required.name
- Route name. You can use atRequest.name(name)
, orURL.name(name)
. Optional.
;;; const router = ;router;router;
router.asyncRoute(path, () => promise, name)
If you want to use dynamic import, You can define using asyncRoute()
.
path
- Any valid URL path that path-to-regexp understands. Required.component
- A react component to render only when the location matches. Required.name
- Route name. You can useRequest.name(name)
, orURL.name(name)
. Optional.
; const router = ;router;router;
router.run((RootComponent) => void)
run
generates the root component.
;; const router = ;router;router;
If you want to add parameters, you can define parameters with the root component parameters.
;; const router = ;router;router;
router.setFirstComponent(component)
If you want to render any component at first rendering, you can define component.
; { return <div className="text-center" style=margin: "100px 0"> <i className="fa fa-cog fa-spin fa-5x fa-fw"/> </div> } const router = ; // Set first rendered component.router; router;
router.setInitialProps(parameters)
If you want to render server-side, you will want to give initial data.
In that case, you can set initial data with setInitialProps()
.
When you use setInitialProps()
, initialPropsWillGet()
and initialPropsDidGet()
are not called for the first time.
Only getInitialProps()
is called.
; const router = ; // Set data from server.router; router;
Link
<Link>
makes a request event and renders component matching route path.
; <Link to="/">Home</Link>
Route component
component.initialPropsWillGet(attributes, prevAttributes): void
Route component can have initialPropsWillGet()
.
initialPropsWillGet()
is invoked immediately before mounting occurs. It is called before getInitialProps()
This method is static.
initialPropsWillGet()
has arguments below.
attributes
- Current route attributes.pathname
- String of the current path.params
- Object with the parsed url parameter. Defaults to {}.
prevAttributes
- Previous route attributes. Defaults to {}.pathname
- String of the previous path.params
- Object with the parsed url parameter at previous page. Defaults to {}.
async/await is not supported.
component.getInitialProps(attributes, prevAttributes): Object
Route component can have getInitialProps()
that can use async/await.
getInitialProps()
perform the rendering after promise has been resolved, The resolved data can be retrieved as props of component.
This method is static.
And getInitialProps()
has arguments below.
attributes
- Current route attributes.pathname
- String of the current path.params
- Object with the parsed url parameter. Defaults to {}.
prevAttributes
- Previous route attributes. Defaults to {}.pathname
- String of the previous path.params
- Object with the parsed url parameter at previous page. Defaults to {}.
; Component static async { console; return data: "Get initial props!!" ; } { return <div> <div>UserId: thispropsparamsuserId</div> <div>Data: thispropsdata</div> </div> ; } const router = ;router;router;
component.initialPropsDidGet(props, prevProps): void
Route component can have initialPropsDidGet()
.
initialPropsDidGet()
is called after getInitialProps()
.
If more than one promise is pending, Async-react-router gets only data of last executed promise.
For this reason, initialPropsDidGet()
is executed only when the last promise is resolved.
This method is static.
initialPropsDidGet()
has arguments.
props
- Current props of components defined at route.pathname
- String of the current path.params
- Object with the parsed url parameter. Defaults to {}.{data}
- Data retrieved usinggetInitialProps()
.
prevProps
- Previous props of components defined at route. First rendering to {}.pathname
- String of the previous path.params
- Object with the parsed url parameter at previous page. Defaults to {}.{data}
- Data retrieved usinggetInitialProps()
.
async/await is not supported.
Request
Request.to(path)
When you want to push next request, you can use to
of Request
.
path
- String of next path.
; Request; // Change url to `#/next`.
Request.name(routeName, urlParameters)
You can make next request from the name
defined at route.
routeName
- Route name for next request.urlParameters
- Object of next url parameters. Optional.
;;; Component { return <div>thispropsparamsuserId</div>; }; const router = ;router;router; Requestname"User" userId: 1; // Change url to `#/user/1`.
Request.isActive(path)
When you want to check path, you can use isActive()
of Request
.
; // When current path is `/`...Request; // trueRequest; // false
URL
URL.to(path)
When you want to make path, you can use to
of URL
.
path
- String of path.
; URL; // String `#/next`.
URL.name(routeName, urlParameters)
You can make URL from the name
defined at route.
routeName
- Route name.urlParameters
- Object of url parameter, if it requires.
;;; Component { return <div>thispropsparamsuserId</div>; }; const router = ;router;router; URLname"User" userId: 1; // String `#/user/1`.
Server Side Rendering
Async-react-router supports server-side rendering.
SSR.createServerRouter()
generates server-side router instance.- You can deal with SSR just by changing
createRouter()
toSSR.createRouter()
on client side. - It is also possible to obtain resolved data on the server side via HTML on client-side.
Server Side
SSR.createServerRouter()
SSR.createServerRouter()
generates server-side router instance. Supported history type is only memory history.
serverRouter
instance has route()
and asyncRoute()
also.
; app
serverRouter.runUsingPathname(pathname, callback(RootComponent, data) => void)
serverRouter.runUsingPathname()
generates root component and initial data.
getInitialProps()
and initialPropsWillGet()
, initialPropsDidGet()
are not called for the first time.
;;;;;; const app = ; app
Client Side
SSR.createRouter()
SSR.createrRouter ()
generates a router instance with the same functionality as createrRouter ()
.
The only difference is history type.
Supported history type is only browser history.
Hash History and Memory History cannot be used.
;;; // Please make another file and import. { router; router;} const router = SSR;;router;router;
This is the same process as below.
;;; // Please make another file and import. { router; router;} const router = ;;router;router;
Thanks for the inspiration
License
MIT