blob: 4fae1b36ac4deef6cc5f8495f6534691747566cc (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useDispatch } from "react-redux";
import { actions, useTypedSelector } from "./store";
import { Link } from "react-router-dom";
const App: React.FC = () => {
const dispatch = useDispatch();
const { isLoading } = useTypedSelector(state => ({
isLoading: state.isLoading,
}));
return (
<Router>
<nav className="bg-blue-400">
<ul className="container mx-auto justify-between flex py-6 text-white">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<div className="container mx-auto">
<h1>Welcome to the home page. Loading: {isLoading ? "true" : "false"}</h1>
<button
className="bg-gray-300 py-4 px-6"
onClick={() => dispatch(actions.toggleIsLoading())}>isLoading</button>
</div>
</Route>
<Route exact path="/about">
<div className="container mx-auto">
<h1>Here is the about page.</h1>
</div>
</Route>
<Route exact path="/contact">
<div className="container mx-auto">
<h1>Here is the contact page.</h1>
</div>
</Route>
</Switch>
</Router>
);
};
export default App;
|