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 (
    <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。

下一节：

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