react - router example 2

1.Custom Link

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
} from "react-router-dom";

// This example show how you could create a custom
//  that renders something special when the URL
// is the same as the one the  points to.

export default function CustomLinkExample() {
  return (
    
      

        
        

        


        
          
            
          
          
            
          
        
      
    
  );
}

function OldSchoolMenuLink(props) {
  const { label, to, activeOnlyWhenExact } = props;

  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact,
  });
Ï
  return (
    

      {match && "> "}
      {label}
    
  );
}

function Home() {
  return (
    

      
Home
    
  );
}

function About() {
  return (
    

      
About
    
  );
}

---

2.Preventing Transitions

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Prompt,
} from "react-router-dom";

// Sometimes you want to prevent the user from
// navigating away from a page. The most common
// use case is when they have entered some data
// into a form but haven't submitted it yet, and
// you don't want them to lose it.

export default function PreventingTransitionsExample() {
  return (
    
      

        

          Form
        
        

          One
        
        

          Two
        
      

      
        } />
        One} />
        Two} />
      
    
  );
}

function BlockingForm() {
  let [isBlocking, setIsBlocking] = useState(false);

  return (
    
 {
        event.preventDefault();
        event.target.reset();
        setIsBlocking(false);
      }}
    >
      
          `Are you sure you want to go to ${location.pathname}`
        }
      />

      

        Blocking? {isBlocking ? "Yes, click a link or the back button" : "Nope"}
      

      

         {
            setIsBlocking(event.target.value.length > 0);
          }}
        />
      

      

        Submit to stop blocking
      
    
  );
}

3.No Match

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
  useLocation,
} from "react-router-dom";

// You can use the last  in a  as a kind of
// "fallback" route, to catch 404 errors.
//
// There are a few useful things to note about this example:
//
// - A  renders the first child  that matches
// - A  may be used to redirect old URLs to new ones
// - A Home
          
          

            Old Match, to be redirected
          
          

            Will Match
          
          

            Will Not Match
          
          

            Also Will Not Match
          
        

        
          
            
          
          
            
          
          
            
          
          
            
          
        
      

); } function Home() { return

Home

; } function WillMatch() { return

Matched!

; } function NoMatch() { let location = useLocation(); return (

No match for {location.pathname}

); }

4.Recursive Paths

1. 注意数组的find方法

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
  useParams,
  useRouteMatch,
} from "react-router-dom";

// Sometimes you don't know all the possible routes
// for your application up front; for example, when
// building a file-system browsing UI or determining
// URLs dynamically based on data. In these situations,
// it helps to have a dynamic router that is able
// to generate routes as needed at runtime.
//
// This example lets you drill down into a friends
// list recursively, viewing each user's friend list
// along the way. As you drill down, notice each segment
// being added to the URL. You can copy/paste this link
// to someone else and they will see the same UI.
//
// Then click the back button and watch the last
// segment of the URL disappear along with the last
// friend list.

export default function RecursiveExample() {
  return (
    
      
        
          
        
        
          
        
      
    
  );
}

function Person() {
  let { url } = useRouteMatch();
  let { id } = useParams();
  let person = find(parseInt(id));

  return (
    

      
{person.name}’s Friends

      

        {person.friends.map((id) => (
          

            {find(id).name}
          
        ))}
      

      
        
          
        
      
    
  );
}

const PEEPS = [
  { id: 0, name: "Michelle", friends: [1, 2, 3] },
  { id: 1, name: "Sean", friends: [0, 3] },
  { id: 2, name: "Kim", friends: [0, 1, 3] },
  { id: 3, name: "David", friends: [1, 2] },
];

function find(id) {
  return PEEPS.find((p) => p.id === id);
}