front/src/Components/App.js
2019-04-09 19:39:31 +02:00

69 lines
1.9 KiB
JavaScript

import React, { Component, Fragment } from 'react';
import Header from './Header';
import {
BrowserRouter as Router, Route,
Switch,
} from 'react-router-dom';
import Map from '../Routes/Map';
import Search from '../Routes/Search';
import Home from '../Routes/Home';
import Vegetables from '../Routes/Vegetables';
import Vegetable from '../Routes/Vegetable';
class App extends Component {
constructor(props) {
super(props)
this.state = {
background: 1
}
this.changeBackground = this.changeBackground.bind(this);
}
changeBackground(background) {
document.body.style.background = `url('/background/${background}.jpg') no-repeat fixed`;
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center center';
}
render() {
return (
<Fragment>
<Header></Header>
<Router>
<Switch>
<Route
exact
path="/"
render={(props) => <Home {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/carte"
render={(props) => <Map {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/recherche/:query"
render={(props) => <Search {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/vegetaux/:typeId-:typeSlug"
render={(props) => <Vegetables {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug"
render={(props) => <Vegetable {...props} changeBackground={this.changeBackground} />}
/>
</Switch>
</Router>
</Fragment>
);
}
}
export default App;