router react tutorial

1function Navbar() {
2  return (
3    <div>
4      <Link to="/">Home </Link>
5      <Link to="/about">About Us </Link>
6      <Link to="/shop">Shop Now </Link>
7    </div>
8  );
9};
10

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