File tree Expand file tree Collapse file tree 2 files changed +42
-2
lines changed
Expand file tree Collapse file tree 2 files changed +42
-2
lines changed Original file line number Diff line number Diff line change 11## react-dynamic-route
22
3- load react component based on routing path
3+ Load page component at ` /src/pages ` folder based on ` window.location.pathname `
44
55<br >
66
7+ ### Basic Usage
8+ App.js
9+ ``` jsx
10+ import React from ' react'
11+ import DynamicRoute from ' react-dynamic-route'
12+
13+ export default function App () {
14+ return (
15+ < DynamicRoute
16+ page= {path => import (' ./pages' + path).then (module => module .default )}
17+ loading= {< Loading / > }
18+ props= {{
19+ someProp1,
20+ someProp2,
21+ }}
22+ / >
23+ )
24+ }
25+ ```
26+
27+ Folder structure
28+ ```
29+ src/
30+ pages/
31+ login/
32+ sign-in.js
33+ sing-up.js
34+ my-info.js
35+ 404.js
36+ App.js
37+ ```
38+
39+ Then, routes below
40+
41+ | path | component |
42+ | -------------- | --------------------------- |
43+ | /login/sign-in | /src/pages/login/sign-in.js |
44+ | /login/sign-up | /src/pages/login/sign-up.js |
45+ | /my-info | /src/pages/my-info.js |
46+ | /blablabla | /src/pages/404.js |
Original file line number Diff line number Diff line change 11{
22 "name" : " react-dynamic-route" ,
3- "version" : " 0.0.11 " ,
3+ "version" : " 0.0.12 " ,
44 "description" : " Load react component dynamically based on routing path" ,
55 "keywords" : [
66 " react" ,
You can’t perform that action at this time.
0 commit comments