Skip to content

Instantly share code, notes, and snippets.

@dheeraj-thedev

dheeraj-thedev/basic_router.jsx

Forked from siakaramalegos/basic_router.jsx
Created April 23, 2021 12:03
Show Gist options
  • Save dheeraj-thedev/0eef4eebc34c1ee85dd73da1b3f6bcfe to your computer and use it in GitHub Desktop.
Save dheeraj-thedev/0eef4eebc34c1ee85dd73da1b3f6bcfe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @siakaramalegos siakaramalegos revised this gist May 16, 2017. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions basic_router.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    // BrowserRouter is the router implementation for HTML5 browsers
    // Switch returns only the first matching route rather than all matching routes
    // BrowserRouter is the router implementation for HTML5 browsers (vs Native).
    // Link is your replacement for anchor tags.
    // Route is the conditionally shown component based on matching a path to a URL.
    // Switch returns only the first matching route rather than all matching routes.
    import {
    BrowserRouter as Router,
    Link,
  2. @siakaramalegos siakaramalegos created this gist May 16, 2017.
    37 changes: 37 additions & 0 deletions basic_router.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    // BrowserRouter is the router implementation for HTML5 browsers
    // Switch returns only the first matching route rather than all matching routes
    import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
    } from 'react-router-dom';
    import React from 'react';

    const Home = () => <h1>Home</h1>;
    const About = () => <h1>About</h1>;

    // We give each route either a target `component`, or we can send functions in `render` or `children`
    // that return valid nodes. `children` always returns the given node whether there is a match or not.
    const App = () => (
    <Router>
    <div>
    <Link to="/">Home</Link>{' '}
    <Link to={{pathname: '/about'}}>About</Link>{' '}
    <Link to="/contact">Contact</Link>

    <Switch>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route
    path="/contact"
    render={() => <h1>Contact Us</h1>} />
    <Route path="/blog" children={({match}) => (
    <li className={match ? 'active' : ''}>
    <Link to="/blog">Blog</Link>
    </li>)} />
    <Route render={() => <h1>Page not found</h1>} />
    </Switch>
    </div>
    </Router>
    );