add all nav components, gonfigured route

src/About/About.js

@@ -1,11 +1,11 @@
-import React from 'react'
-import './About.scss'
+import React from 'react';
+import './About.scss';
 
 const About = props => (
 	<div className="About">
 		<h1>About page</h1>
 	</div>
-)
+);
 
 
-export default About
+export default About;

src/About/index.js

@@ -0,0 +1 @@
+export { default } from './About';

src/App.js

@@ -1,31 +1,63 @@
-import React, { Component } from 'react'
-import './App.scss'
-import About from './About/About'
-import Cars from './Cars/Cars'
+import React, { Component } from 'react';
+import './App.scss';
+import { Route, NavLink, Switch, Redirect } from 'react-router-dom';
+import About from './About';
+import Cars from './Cars';
+import CarDetail from './CarDetail';
 
 class App extends Component {
+	state = {
+		isLoggedIn: false,
+	}
+
 	render() {
 
 		return (
 			<div>
 				<nav className="nav">
 					<ul>
 						<li>
-							<a href="/">Home</a>
+							<NavLink
+								to="/"
+								exact
+								activeClassName={'wfm-active'}
+							>Home</NavLink>
+						</li>
+						<li>
+							<NavLink
+								to='/about'
+								activeStyle={{
+									color: 'blue',
+								}}
+							>About</NavLink>
 						</li>
 						<li>
-							<a href="/about">About</a>
+							<NavLink
+								to={{
+									pathname: '/cars',
+								}}
+							>Cars</NavLink>
 						</li>
 					</ul>
 				</nav>
-
 				<hr />
-				<About />
+				<div style={{ textAlign: 'center' }}>
+					<h3>Is logged in {this.state.isLoggedIn ? 'TRUE' : 'FALSE'}</h3>
+					<button onClick={() => this.setState({ isLoggedIn: true, })}>Login</button>
+				</div>
+				<hr />
+				<Switch>
+					<Route path='/' exact render={() => <h1 style={{ textAlign: 'center' }}>Home Page</h1>} />
+					{this.state.isLoggedIn ? <Route path='/about' component={About} /> : null}
+					<Route path='/cars/:name' component={CarDetail} />
+					<Route path='/cars' component={Cars} />
+					<Redirect to={'/'} />
+					{/* <Route render={() => <h1 style={{ color: 'red', textAlign: 'center' }}>404 not found</h1>} /> */}
+				</Switch>
 
-				<Cars />
-			</div>
+			</div >
 		);
 	}
-}
+};
 
-export default App
+export default App;

src/App.scss

@@ -26,5 +26,11 @@
 		li {
 			margin-right: 15px;
 		}
+
+		a.active,
+		a.wfm-active {
+			font-weight: bold;
+			color: red;
+		}
 	}
 }

src/CarDetail/CarDetail.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import './CarDetail.scss';
+
+class CarDetail extends Component {
+
+	render() {
+		return (
+			<div style={{ textAlign: 'center' }}>
+				<h1>{this.props.match.params.name}</h1>
+			</div>
+		)
+	}
+};
+
+export default CarDetail;

src/CarDetail/index.js

@@ -0,0 +1 @@
+export { default } from './CarDetail'

src/Cars/Car/Car.js

@@ -1,14 +1,17 @@
-import React from 'react'
-import './Car.scss'
-
+import React from 'react';
+import './Car.scss';
+import { withRouter } from 'react-router-dom';
 
 const Car = props => {
 	return (
-		<div className={'Car'}>
+		<div
+			className={'Car'}
+			onClick={() => props.history.push('/cars/' + props.name.toLowerCase())}
+		>
 			<h3>Сar name: {props.name}</h3>
 			<p>Year: <strong>{props.year}</strong></p>
-		</div>
+		</div >
 	)
-}
+};
 
-export default Car
+export default withRouter(Car);

src/Cars/Car/index.js

@@ -0,0 +1 @@
+export { default } from './Car';

src/Cars/Cars.js

@@ -1,32 +1,43 @@
-import React, {Component} from 'react'
-import Car from './Car/Car'
+import React, { Component } from 'react';
+import Car from './Car';
 
-export default class Cars extends Component {
-  state = {
-    cars: [
-      {name: 'Ford', year: 2018},
-      {name: 'Audi', year: 2016},
-      {name: 'Mazda', year: 2010}
-    ]
-  }
+class Cars extends Component {
+	state = {
+		cars: [
+			{ name: 'Ford', year: 2018 },
+			{ name: 'Audi', year: 2016 },
+			{ name: 'Mazda', year: 2010 }
+		]
+	};
 
-  render() {
-    return (
-      <div style={{
-        width: 400,
-        margin: 'auto',
-        paddingTop: '20px'
-      }}>
-        {this.state.cars.map((car, index) => {
-          return (
-            <Car
-              key={index}
-              name={car.name}
-              year={car.year}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-}
+	goToHomePage = () => {
+		this.props.history.push({
+			pathname: '/'
+		})
+	};
+
+	render() {
+		return (
+			<div style={{
+				width: 400,
+				margin: 'auto',
+				paddingTop: '20px',
+				textAlign: 'center',
+			}}>
+				<button onClick={this.goToHomePage}>Go to home page</button>
+				<hr />
+				{this.state.cars.map((car, index) => {
+					return (
+						<Car
+							key={index}
+							name={car.name}
+							year={car.year}
+						/>
+					)
+				})}
+			</div>
+		)
+	}
+};
+
+export default Cars;

src/Cars/index.js

@@ -0,0 +1 @@
+export { default } from './Cars'

src/index.js

@@ -2,15 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom';
 import registerServiceWorker from './registerServiceWorker';
 
-
 const app = (
 	<BrowserRouter>
 		<App />
 	</BrowserRouter>
-)
+);
 
 ReactDOM.render(app, document.getElementById('root'));
 registerServiceWorker();