关于javascript:reactrouter官网demo解析2URL参数

源码：
example.js

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

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {let { id} = useParams();
  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

index.js

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

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

index.html

<div id="root"></div>

效果图：

相干常识：
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。