react router dom tutorial code example
Example 1: import react-router-dom
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
Example 2: react router dom
npm install react-router-dom
Example 3: react router redirect
<Route exact path="/">
{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>
Example 4: react router switch
ReactDOM.render((
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/explore" component={Explore} />
</Switch>),
document.getElementById('root')
);
Example 5: router react tutorial
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};
Example 6: 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>
)
}