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;