router react tutorial
npm install react-router-dom
4.4
5
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};
Thank you!
5
0
3.5
4
//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>
)
}
Thank you!
4
0
Are there any code examples left?
New code examples in category Javascript
-
Javascript 2023-04-21 22:52:36
-
Javascript 2022-03-27 22:25:20 javascript download string as file
-
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
-
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
-
Javascript 2022-03-27 21:15:02 javascript regex french phone number
-
Javascript 2022-03-27 21:05:03 cypress custom error message
-
Javascript 2022-03-27 21:00:05 create element javascript with id
-
Javascript 2022-03-27 20:40:57 feather icons react
-
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
-
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password