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>
    )
}