import link from 'react-router-dom' 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: link to react

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import { Home } from 'wherever-you-put-it/home.component.jsx';
import { Something } from 'wherever-you-put-it/something.component.jsx';
import { SomethingElse } from 'wherever-you-put-it/something-else.component.jsx';

class App extends Component {
	render() {
      return (
      	<BrowserRouter>
        	<Switch>
        		<Route path="/">
        			<Home />
        		</Route>
        		<Route path="/something">
        			<Something />
        		</Route>
        		<Route path="/somethingelse">
        			<SomethingElse />
        		</Route>
        	</Switch>
        	<SomeComponentOrElement>
        		<Link to="/">Home</Link>
        		<Link to="/something">Something</Link>
        		<Link to="/somethingelse">Something Else</Link>
        	</SomeComponentOrElement>
        </BrowserRouter>
      )
    }
}

render(<App />, document.getElementById('app'));

Example 3: react router dom

npm install react-router-dom

Example 4: link in react

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

Example 5: how to export switch from react-router-dom

let routes = (
  <Fade>
    <Switch>
      {/* there will only ever be one child here */}
      <Route />
      <Route />
    </Switch>
  </Fade>
);

let routes = (
  <Fade>
    {/* there will always be two children here,
        one might render null though, making transitions
        a bit more cumbersome to work out */}
    <Route />
    <Route />
  </Fade>
);