react router tutorial
//App.js File
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Navbar from './Navbar';
import About from './About';
import Shop from './Shop';
//all classNames beginning with w3-* are from w3.css framework available on w3.schools.com
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<div className="w3-container">
<Navbar />
<Switch>
<Route path="/about" exact component={About}/>
<Route path="/shop" exact component={Shop}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
//Navbar.js File
import React from 'react';
import {Link} from 'react-router-dom';
export default class Navbar extends React.Component{
render(){
return(
<div className="w3-bar w3-deep-purple">
<span className="w3-bar-item w3-button w3-hover-green">MyReactRouter</span>
<Link to="/about" className="w3-bar-item w3-button w3-hover-green">
<span>About</span>
</Link>
<Link to="/shop">
<span className="w3-bar-item w3-button w3-hover-green">Shop</span>
</Link>
</div>
)
}
}
//About.js File
import React from 'react';
export default function About(){
return(
<div className="w3-container">
<h1 className="w3-header w3-indigo w3-center">About Page</h1>
</div>
)
}
//Shop.js File
import React from 'react';
export default function Shop(){
return(
<div className="w3-container">
<h1 className="w3-header w3-indigo w3-center">Shop Page</h1>
</div>
)
}