Skip to content

Commit 66c207b

Browse files
sunzid02sunzid02
committed
React Router
1 parent 869ab91 commit 66c207b

File tree

7 files changed

+194
-34
lines changed

7 files changed

+194
-34
lines changed

‎confusion/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react": "^16.13.1",
1313
"react-dom": "^16.13.1",
1414
"react-popper": "0.9.2",
15+
"react-router-dom": "4.2.2",
1516
"react-scripts": "3.4.1",
1617
"reactstrap": "5.0.0"
1718
},

‎confusion/src/App.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,21 @@ import Main from './components/MainComponent';
44

55
import './App.css';
66

7+
import { BrowserRouter } from 'react-router-dom';
8+
9+
10+
711
class App extends Component{
812

913

1014
render(){
1115

1216
return(
13-
<div>
14-
<Main />
15-
</div>
17+
<BrowserRouter>
18+
<div>
19+
<Main />
20+
</div>
21+
</BrowserRouter>
1622
);
1723

1824
}

‎confusion/src/components/FooterComponent.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { Component } from 'react';
2-
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
33

44
function Footer(props) {
55
return(
@@ -10,10 +10,10 @@ function Footer(props) {
1010
<div className="col-4 offset-1 col-sm-2">
1111
<h5>Links</h5>
1212
<ul className="list-unstyled">
13-
<li><a href="#">Home</a></li>
14-
<li><a href="#">About</a></li>
15-
<li><a href="#">Menu</a></li>
16-
<li><a href="contactus.html">Contact</a></li>
13+
<li><Link to="/home">Home</Link></li>
14+
<li><Link to="/aboutus">About</Link></li>
15+
<li><Link to="/menu">Menu</Link></li>
16+
<li><Link to="/contactus">Contact</Link></li>
1717
</ul>
1818
</div>
1919
<div className="col-7 col-sm-5">
@@ -24,8 +24,8 @@ function Footer(props) {
2424
HONG KONG<br />
2525
<i className="fa fa-phone fa-lg"></i>: +852 1234 5678<br />
2626
<i className="fa fa-fax fa-lg"></i>: +852 8765 4321<br />
27-
<i className="fa fa-envelope fa-lg"></i>: <a href="mailto:confusion@food.net">
28-
confusion@food.net</a>
27+
<i className="fa fa-envelope fa-lg"></i>: <Link to="mailto:confusion@food.net">
28+
confusion@food.net</Link>
2929
</address>
3030
</div>
3131
<div className="col-12 col-sm-4 align-self-center">
@@ -35,7 +35,7 @@ function Footer(props) {
3535
<a className="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i className="fa fa-linkedin"></i></a>
3636
<a className="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i className="fa fa-twitter"></i></a>
3737
<a className="btn btn-social-icon btn-google" href="http://youtube.com/"><i className="fa fa-youtube"></i></a>
38-
<a className="btn btn-social-icon" href="mailto:"><i className="fa fa-envelope-o"></i></a>
38+
<a className="btn btn-social-icon" to="mailto:"><i className="fa fa-envelope-o"></i></a>
3939
</div>
4040
</div>
4141
</div>
@@ -46,7 +46,7 @@ function Footer(props) {
4646
</div>
4747
</div>
4848
</div>
49-
49+
5050
);
5151
}
5252

‎confusion/src/components/HeaderComponent.js‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,70 @@
11
import React, { Component } from 'react';
2-
import { Navbar, NavbarBrand, Jumbotron } from "reactstrap";
3-
2+
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from "reactstrap";
3+
import { NavLink } from 'react-router-dom';
44

55
class Header extends Component{
66

7+
constructor(props){
8+
super(props);
9+
10+
this.state={
11+
isNavOpen: false
12+
};
13+
this.toggleNav = this.toggleNav.bind(this);
14+
}
15+
16+
toggleNav(){
17+
this.setState({
18+
isNavOpen: !this.state.isNavOpen
19+
});
20+
}
21+
722
render(){
823
return(
924
// react fragment
1025
// <>
1126
// </>
1227
<React.Fragment>
13-
<Navbar dark>
28+
<Navbar dark expand="md">
1429
<div className="container">
15-
<NavbarBrand href="/"> Ristorante Con Fusion </NavbarBrand>
30+
31+
<NavbarToggler onClick={this.toggleNav} />
32+
33+
<NavbarBrand className="mr-auto" href="/">
34+
<img src="assets/images/logo.png" height="30" width="41" alt="Ristorante Con Fusion" />
35+
</NavbarBrand>
36+
37+
<Collapse isOpen={this.state.isNavOpen} navbar>
38+
<Nav navbar>
39+
<NavItem>
40+
<NavLink className="nav-link" to="/home">
41+
<span className="fa fa-home fa-lg" ></span>Home
42+
</NavLink>
43+
</NavItem>
44+
45+
<NavItem>
46+
<NavLink className="nav-link" to="/aboutus">
47+
<span className="fa fa-info fa-lg" ></span>About Us
48+
</NavLink>
49+
</NavItem>
50+
51+
<NavItem>
52+
<NavLink className="nav-link" to="/menu">
53+
<span className="fa fa-list fa-lg" ></span>Menu
54+
</NavLink>
55+
</NavItem>
56+
57+
<NavItem>
58+
<NavLink className="nav-link" to="/contactus">
59+
<span className="fa fa-address-card fa-lg" ></span>Contact Us
60+
</NavLink>
61+
</NavItem>
62+
63+
</Nav>
64+
</Collapse>
1665
</div>
1766
</Navbar>
67+
1868
<Jumbotron>
1969
<div className="container">
2070
<div className="row row-header">
@@ -23,7 +73,7 @@ class Header extends Component{
2373
<p>
2474
We take inspiration from te World's best cuisines, and create a unique
2575
fusion experience. Our lipsmacking creations
26-
will tickle your culinary senses!
76+
will ti ckle your culinary senses!
2777
</p>
2878
</div>
2979
</div>

‎confusion/src/components/HomeComponent.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
function Home(props) {
4+
return(
5+
<div className="container">
6+
<h4>Home</h4>
7+
</div>
8+
);
9+
}
10+
11+
export default Home;

‎confusion/src/components/MainComponent.js‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React, { Component } from 'react';
22

3+
import Home from './HomeComponent';
34
import Menu from './MenuComponent';
45
import Header from './HeaderComponent';
56
import Footer from './FooterComponent';
7+
import DishDetail from './DishdetailComponent';
68

79
import { DISHES } from '../shared/dishes'
8-
import DishDetail from './DishdetailComponent';
10+
import { Switch, Route, Redirect } from 'react-router-dom';
11+
912

1013
class Main extends Component {
1114

@@ -14,29 +17,30 @@ class Main extends Component {
1417

1518
this.state = {
1619
dishes: DISHES,
17-
selectedDish: null
1820
};
1921

2022
}
2123

22-
onDishSelect(dishId) {
23-
// alert(dishId);
24-
this.setState({
25-
selectedDish: dishId
26-
});
27-
28-
}
29-
30-
3124
render() {
3225

26+
const HomePage = ()=>{
27+
return(
28+
<Home></Home>
29+
);
30+
};
31+
3332
return (
3433
<div>
3534
<Header></Header>
36-
<Menu dishes={this.state.dishes}
37-
onClick={ (dishId) => this.onDishSelect(dishId) } />
3835

39-
<DishDetail dish={ this.state.dishes.filter( (dish)=> dish.id === this.state.selectedDish )[0] } />
36+
<Switch>
37+
<Route path="/home" component={ HomePage } />
38+
<Route exact path="/menu" component={() => <Menu dishes={this.state.dishes}/> }/>
39+
40+
{/* if url dosesnt match, bydefault redirect to */}
41+
<Redirect to="/home" />
42+
</Switch>
43+
4044
<Footer></Footer>
4145
</div>
4246
);

0 commit comments

Comments
 (0)