1//App.js File
2import React from 'react';
3import {BrowserRouter, Switch, Route} from 'react-router-dom';
4import Navbar from './Navbar';
5import About from './About';
6import Shop from './Shop';
7
8//all classNames beginning with w3-* are from w3.css framework available on w3.schools.com
9export default class App extends React.Component {
10 render() {
11 return (
12 <BrowserRouter>
13 <div className="w3-container">
14 <Navbar />
15 <Switch>
16 <Route path="/about" exact component={About}/>
17 <Route path="/shop" exact component={Shop}/>
18 </Switch>
19 </div>
20 </BrowserRouter>
21 )
22 }
23}
24
25//Navbar.js File
26import React from 'react';
27import {Link} from 'react-router-dom';
28
29export default class Navbar extends React.Component{
30 render(){
31 return(
32 <div className="w3-bar w3-deep-purple">
33 <span className="w3-bar-item w3-button w3-hover-green">MyReactRouter</span>
34 <Link to="/about" className="w3-bar-item w3-button w3-hover-green">
35 <span>About</span>
36 </Link>
37 <Link to="/shop">
38 <span className="w3-bar-item w3-button w3-hover-green">Shop</span>
39 </Link>
40 </div>
41 )
42 }
43}
44
45//About.js File
46import React from 'react';
47export default function About(){
48 return(
49 <div className="w3-container">
50 <h1 className="w3-header w3-indigo w3-center">About Page</h1>
51 </div>
52 )
53}
54
55//Shop.js File
56import React from 'react';
57export default function Shop(){
58 return(
59 <div className="w3-container">
60 <h1 className="w3-header w3-indigo w3-center">Shop Page</h1>
61 </div>
62 )
63}
64