react-router官网demo解析2-URL参数

源码：

example.js

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

export default function ParamsExample() {
  return (
    
      

        
Accounts

        

          

            Netflix
          
          

            Zillow Group
          
          

            Yahoo
          
          

            Modus Create
          
        

        
          } />
        
      
    
  );
}

function Child() {
  let { id } = useParams();
  return (
    

      
ID: {id}
    
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
,
document.getElementById('root')
);

index.html

效果图：

相关知识：

path="/:id": 表示匹配的路径为 / ，冒号表示路径后面所带的参数，即 / 后面的内容作为id的值。

useParams(): 返回一个key-value组成的对象，对象里是当前匹配到的路由的参数。这个例子中内容就是key为id，value为对应的值netflix，zillow-group，yahoo或者modus-create中的一个。

例如：此时路径为/zillow-group/si，则id = zillow-group。
useParams()为{id: zillow-group}。 即只会匹配到 / 后到第一个路径分支。 /si不会作为参数传到id。

下一节：

react-router官网demo解析3-嵌套路由