Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Yossapol
/
wds-react
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit 87109a12
authored
Feb 25, 2019
by
jutawuth nantawan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update route
1 parent
4fc3c2c4
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
116 additions
and
4 deletions
README.md
README.md
View file @
87109a1
...
...
@@ -416,12 +416,125 @@ import '../../resources/style/css/style.css';
## 4. Routing
route
### Switch
Switch เป็นการทำ Route แบบเปลี่ยนทั้งหน้า เมื่อ url เปลี่ยนหน้าจอจะแสดงผลที่ตรงกับ path ที่ระบุไว้เพียงหน้าจอเดียว โดยเรียงลำดับการแสดงผลจากบนลงล่าง
```
javascript
// app.js
import
React
,
{
Component
}
from
'react'
;
import
Routing
from
'./routes/mainRoutes'
;
import
'./resources/style/css/App.css'
;
class
App
extends
Component
{
render
()
{
return
<
Routing
eventEmitter
=
{
this
.
props
.
eventEmitter
}
/>
;
}
}
export
default
App
;
```
import ไฟล์ mainRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js
```
javascript
// mainRoutes.js
import
React
from
'react'
;
import
{
Switch
,
Route
}
from
'react-router-dom'
;
import
LoginPage
from
'../pages/login/LoginPage'
;
import
MainPage
from
'../pages/main/MainPage'
;
export
default
({
eventEmitter
})
=>
(
<
Switch
>
<
Route
exact
path
=
"/"
component
=
{
LoginPage
}
/
>
<
Route
path
=
"/login"
component
=
{
LoginPage
}
/
>
<
Route
path
=
"/process"
render
=
{
props
=>
<
MainPage
eventEmitter
=
{
eventEmitter
}
{...
props
}
/>
}
/>
<
/Switch
>
);
```
### match
match เป็นการแสดงผล component เฉพาะส่วน ซึ่งสามารถทำงานภายใต้หน้าจอหลักได้
```
javascript
// mainPage.jsx
import
React
from
'react'
;
import
{
Layout
}
from
'antd'
;
import
ContentRoutes
from
'../../routes/contentRoutes'
;
export
default
class
MainPage
extends
React
.
Component
{
render
()
{
return
(
<
Layout
style
=
{{
minHeight
:
'100vh'
}}
>
<
Header
/>
<
Sider
/>
<
Layout
>
<
Breadcrumb
/>
<
div
className
=
"content"
style
=
{{
margin
:
10
}}
>
<
ContentRoutes
match
=
{
this
.
props
.
match
}
/
>
<
/div
>
<
Footer
/>
<
/Layout
>
<
/Layout
>
);
}
}
```
import ไฟล์ contentRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js
```
javascript
//contentRoutes.js
import
React
from
'react'
;
import
{
Switch
,
Route
}
from
'react-router-dom'
;
import
Content1
from
'../pages/content/Content1'
;
import
Content2
from
'../pages/content/Content2'
;
import
Content3
from
'../pages/content/Content3'
;
import
Home
from
'../pages/content/Home'
;
export
default
({
match
})
=>
{
return
(
<
Switch
>
<
Route
path
=
{
`
${
match
.
url
}
/home`
}
component
=
{
Home
}
/
>
<
Route
path
=
{
`
${
match
.
url
}
/content1`
}
component
=
{
Content1
}
/
>
<
Route
path
=
{
`
${
match
.
url
}
/content2`
}
component
=
{
Content2
}
/
>
<
Route
path
=
{
`
${
match
.
url
}
/content3`
}
component
=
{
Content3
}
/
>
<
/Switch
>
);
};
```
## 5. Calling API
call
## 6. Default Component Property & Behavior
default
\ No newline at end of file
Write
Preview
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment