回答編集履歴
1
追記
test
CHANGED
|
@@ -38,3 +38,48 @@
|
|
|
38
38
|
+ <Route exact path="/Works" element={<Works />} />
|
|
39
39
|
+ <Route exact path="/About" element={<About />} />
|
|
40
40
|
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
コメント欄へのお返事
|
|
45
|
+
|
|
46
|
+
react-router の使い方に関して、根本的な誤解があるような気がします。
|
|
47
|
+
- BrowserRouter (Router) が App.js と Links.js の両方で使われてますが、基本的に最上位レベルで、1 回だけ使うべきものです。
|
|
48
|
+
- Links.js はたぶんヘッダーの部分だけを定義したいんだと思いますので、ここに BrowserRouter や Routes や Route や Works や About は不要なはず。
|
|
49
|
+
- App.js では、<Links /> は常に表示して、残りのコンテンツ部分に LandingPage か Works か About を切り替えて表示したいってことだと思うので、次のようにすれば良いのでは。
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<BrowserRouter>
|
|
55
|
+
<div className="App">
|
|
56
|
+
<Links /> {/* Links は無条件に表示される */}
|
|
57
|
+
|
|
58
|
+
<Routes> {/* 現在の URL に応じて、LandingPage か Works か About のどれかが表示される */}
|
|
59
|
+
<Route exact path="/" element={<LandingPage />} />
|
|
60
|
+
<Route exact path="/Works" element={<Works />} />
|
|
61
|
+
<Route exact path="/About" element={<About />} />
|
|
62
|
+
</Routes>
|
|
63
|
+
</div>
|
|
64
|
+
</BrowserRouter>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
こうすると、例えば / にアクセスすれば次のように表示され、
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
<div className="App">
|
|
73
|
+
<Links />
|
|
74
|
+
<LandingPage />
|
|
75
|
+
</div>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
/Works にアクセスすれば次のように表示されると思います。
|
|
79
|
+
|
|
80
|
+
```jsx
|
|
81
|
+
<div className="App">
|
|
82
|
+
<Links />
|
|
83
|
+
<Works />
|
|
84
|
+
</div>
|
|
85
|
+
```
|