Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Apr 3, 2022. It is now read-only.

Commit2b1d90c

Browse files
committed
Add Routes to App.js
1 parent13eeeaf commit2b1d90c

File tree

3 files changed

+82
-16
lines changed

3 files changed

+82
-16
lines changed

‎src/App.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,17 @@
3636
transform:rotate(360deg);
3737
}
3838
}
39+
40+
.linkList {
41+
display: flex;
42+
list-style: none;
43+
padding:0;
44+
}
45+
46+
.linkItem:not(:last-of-type) {
47+
margin-right:1em;
48+
}
49+
50+
.link {
51+
color: white;
52+
}

‎src/App.js

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,73 @@
11
importlogofrom'./logo.svg';
22
import'./App.css';
3+
import{
4+
BrowserRouterasRouter,
5+
Switch,
6+
Route,
7+
Link
8+
}from"react-router-dom";
9+
importSomeComponentfrom'./SomeComponent'
310

411
constfirstName="John"
512
constlastName="Doe"
613
constfullName=`${firstName}${lastName}`
714

815
functionApp(){
916
return(
10-
<divclassName="App">
11-
<headerclassName="App-header">
12-
<imgsrc={logo}className="App-logo"alt="logo"/>
13-
<p>
14-
Hello,{fullName}
15-
</p>
16-
<a
17-
className="App-link"
18-
href="https://reactjs.org"
19-
target="_blank"
20-
rel="noopener noreferrer"
21-
>
22-
Learn React
23-
</a>
24-
</header>
25-
</div>
17+
<Router>
18+
<divclassName="App">
19+
<headerclassName="App-header">
20+
<imgsrc={logo}className="App-logo"alt="logo"/>
21+
<p>
22+
Hello,{fullName}
23+
</p>
24+
<Switch>
25+
<Routepath="/about">
26+
<About/>
27+
</Route>
28+
<Routepath="/users">
29+
<Users/>
30+
</Route>
31+
<Routepath="/">
32+
<Home/>
33+
</Route>
34+
</Switch>
35+
<ulclassName="linkList">
36+
<liclassName="linkItem">
37+
<Linkto="/"className="link">Home</Link>
38+
</li>
39+
<liclassName="linkItem">
40+
<Linkto="/about"className="link">About</Link>
41+
</li>
42+
<liclassName="linkItem">
43+
<Linkto="/users"className="link">Users</Link>
44+
</li>
45+
</ul>
46+
</header>
47+
</div>
48+
</Router>
49+
);
50+
}
51+
52+
functionHome(){
53+
return<h2>Home</h2>;
54+
}
55+
56+
functionAbout(){
57+
return(
58+
<>
59+
<h2>About</h2>
60+
<SomeComponent/>
61+
</>
62+
);
63+
}
64+
65+
functionUsers(){
66+
return(
67+
<>
68+
<h2>Users</h2>
69+
<SomeComponent/>
70+
</>
2671
);
2772
}
2873

‎src/SomeComponent.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
functionSomeComponent(){
2+
return(
3+
<pstyle={{fontSize:20,color:'#61dafb'}}>This is example component</p>
4+
)
5+
}
6+
7+
exportdefaultSomeComponent

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp