router react tutorial
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};router react tutorial
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};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>
)
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
