Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
1980d417
Commit
1980d417
authored
Aug 05, 2020
by
d.arizona
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
nested home
parent
1daaf7fa
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
50 additions
and
27 deletions
+50
-27
Home.js
src/Home.js
+47
-24
index.js
src/router/index.js
+3
-3
No files found.
src/Home.js
View file @
1980d417
...
...
@@ -18,6 +18,15 @@ import ListItemText from '@material-ui/core/ListItemText';
import
InboxIcon
from
'@material-ui/icons/MoveToInbox'
;
import
MailIcon
from
'@material-ui/icons/Mail'
;
import
{
BrowserRouter
as
Router
,
Switch
,
Route
,
Link
,
useParams
,
useRouteMatch
}
from
"react-router-dom"
;
const
drawerWidth
=
240
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
...
...
@@ -95,6 +104,8 @@ export default function MiniDrawer() {
setOpen
(
false
);
};
let
{
path
,
url
}
=
useRouteMatch
();
return
(
<
div
className
=
{
classes
.
root
}
>
<
CssBaseline
/>
...
...
@@ -160,30 +171,42 @@ export default function MiniDrawer() {
<
/Drawer
>
<
main
className
=
{
classes
.
content
}
>
<
div
className
=
{
classes
.
toolbar
}
/
>
<
Typography
paragraph
>
Lorem
ipsum
dolor
sit
amet
,
consectetur
adipiscing
elit
,
sed
do
eiusmod
tempor
incididunt
ut
labore
et
dolore
magna
aliqua
.
Rhoncus
dolor
purus
non
enim
praesent
elementum
facilisis
leo
vel
.
Risus
at
ultrices
mi
tempus
imperdiet
.
Semper
risus
in
hendrerit
gravida
rutrum
quisque
non
tellus
.
Convallis
convallis
tellus
id
interdum
velit
laoreet
id
donec
ultrices
.
Odio
morbi
quis
commodo
odio
aenean
sed
adipiscing
.
Amet
nisl
suscipit
adipiscing
bibendum
est
ultricies
integer
quis
.
Cursus
euismod
quis
viverra
nibh
cras
.
Metus
vulputate
eu
scelerisque
felis
imperdiet
proin
fermentum
leo
.
Mauris
commodo
quis
imperdiet
massa
tincidunt
.
Cras
tincidunt
lobortis
feugiat
vivamus
at
augue
.
At
augue
eget
arcu
dictum
varius
duis
at
consectetur
lorem
.
Velit
sed
ullamcorper
morbi
tincidunt
.
Lorem
donec
massa
sapien
faucibus
et
molestie
ac
.
<
/Typography
>
<
Typography
paragraph
>
Consequat
mauris
nunc
congue
nisi
vitae
suscipit
.
Fringilla
est
ullamcorper
eget
nulla
facilisi
etiam
dignissim
diam
.
Pulvinar
elementum
integer
enim
neque
volutpat
ac
tincidunt
.
Ornare
suspendisse
sed
nisi
lacus
sed
viverra
tellus
.
Purus
sit
amet
volutpat
consequat
mauris
.
Elementum
eu
facilisis
sed
odio
morbi
.
Euismod
lacinia
at
quis
risus
sed
vulputate
odio
.
Morbi
tincidunt
ornare
massa
eget
egestas
purus
viverra
accumsan
in
.
In
hendrerit
gravida
rutrum
quisque
non
tellus
orci
ac
.
Pellentesque
nec
nam
aliquam
sem
et
tortor
.
Habitant
morbi
tristique
senectus
et
.
Adipiscing
elit
duis
tristique
sollicitudin
nibh
sit
.
Ornare
aenean
euismod
elementum
nisi
quis
eleifend
.
Commodo
viverra
maecenas
accumsan
lacus
vel
facilisis
.
Nulla
posuere
sollicitudin
aliquam
ultrices
sagittis
orci
a
.
<
/Typography
>
<
h2
>
Topics
<
/h2
>
<
ul
>
<
li
>
<
Link
to
=
{
`
${
url
}
/rendering`
}
>
Rendering
with
React
<
/Link
>
<
/li
>
<
li
>
<
Link
to
=
{
`
${
url
}
/components`
}
>
Components
<
/Link
>
<
/li
>
<
li
>
<
Link
to
=
{
`
${
url
}
/props-v-state`
}
>
Props
v
.
State
<
/Link
>
<
/li
>
<
/ul
>
<
Switch
>
<
Route
exact
path
=
{
path
}
>
<
h3
>
Please
select
a
topic
.
<
/h3
>
<
/Route
>
<
Route
path
=
{
`
${
path
}
/:topicId`
}
>
<
Topic
/>
<
/Route
>
<
/Switch
>
<
/main
>
<
/div
>
);
}
\ No newline at end of file
}
function
Topic
()
{
// The <Route> that rendered this component has a
// path of `/topics/:topicId`. The `:topicId` portion
// of the URL indicates a placeholder that we can
// get from `useParams()`.
let
{
topicId
}
=
useParams
();
return
(
<
div
>
<
h3
>
{
topicId
}
<
/h3
>
<
/div
>
);
}
\ No newline at end of file
src/router/index.js
View file @
1980d417
...
...
@@ -44,11 +44,11 @@ export default function BasicExample() {
*/
}
<
Switch
>
<
Route
exact
path
=
"/"
>
<
Home
/>
<
/Route
>
<
Route
path
=
"/login"
>
<
Login
/>
<
/Route
>
<
Route
path
=
"/home"
>
<
Home
/>
<
/Route
>
<
Route
path
=
"/register"
>
<
Register
/>
<
/Route
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
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 comment