Various repairs to the About page
This commit is contained in:
parent
641decc2aa
commit
f9f76513d7
51
src/App.js
51
src/App.js
|
@ -1,38 +1,27 @@
|
||||||
import { FirebaseConfig } from "./config/Config";
|
import { FirebaseConfig } from "./config/Config"
|
||||||
import { initializeApp } from "firebase/app";
|
import { initializeApp } from "firebase/app"
|
||||||
import {Routes, Route} from "react-router-dom";
|
import { Routes, Route } from "react-router-dom"
|
||||||
|
|
||||||
import { Header } from "./components/Header";
|
|
||||||
import './App.css';
|
|
||||||
import { About } from "./pages/About";
|
|
||||||
import { Home } from "./pages/Home";
|
|
||||||
import { Contact } from "./pages/Contact";
|
|
||||||
import Container from "react-bootstrap/Container";
|
|
||||||
import { Nav, Navbar } from "react-bootstrap/esm";
|
|
||||||
|
|
||||||
|
import { Header } from "./components/Header"
|
||||||
|
import './App.css'
|
||||||
|
import { About } from "./pages/About"
|
||||||
|
import { Home } from "./pages/Home"
|
||||||
|
import { Contact } from "./pages/Contact"
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const FBapp = initializeApp(FirebaseConfig);
|
const FBapp = initializeApp(FirebaseConfig)
|
||||||
|
const saySomething = ( word ) => {
|
||||||
|
alert( word )
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Navbar>
|
<Header />
|
||||||
<Container>
|
|
||||||
<Navbar.Brand>App</Navbar.Brand>
|
|
||||||
<Nav>
|
|
||||||
<Nav.Link href="/">Home</Nav.Link>
|
|
||||||
<Nav.Link href="/about">About</Nav.Link>
|
|
||||||
<Nav.Link href="/contact">Contact</Nav.Link>
|
|
||||||
</Nav>
|
|
||||||
</Container>
|
|
||||||
</Navbar>
|
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={ <Home greeting="Hey you, you're at home!" /> } />
|
<Route path="/" element={ <Home greeting="Hey you're at home!" /> } />
|
||||||
<Route path="/about" element={ <About greeting="Hey you, this is about page!" /> } />
|
<Route path="/about" element={ <About greeting="Hey you, this is about page!" handler={saySomething} /> } />
|
||||||
<Route path="/contact" element={ <About greeting="Hey you, this is contact page!" /> } />
|
<Route path="/contact" element={ <Contact /> } />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
export default App;
|
||||||
|
|
||||||
export default App;
|
|
|
@ -1,3 +1,8 @@
|
||||||
export function About ( props ) {
|
export function About ( props ) {
|
||||||
return ( <h1>{props.greeting} </h1>)
|
return (
|
||||||
}
|
<div>
|
||||||
|
<h1>{ props.greeting }</h1>
|
||||||
|
<button onClick={ () => props.handler("I've been clicked!") } >Click me</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue