反应路由器v4匹配

Question

我从官方文档https://reacttraining.com/react-router/web/example/url-params中采用了这个例子，但是我没有得到很好的文档。 所以我理解大部分代码，但我不明白<Route path="/:id" component={Child}/>这是如何工作的（它如何匹配所有的Links ）

import React from 'react'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const ParamsExample = () => (
  <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>
      <Route path="/:id" component={Child}/>
    </div>
  </Router>
)

const Child = ({match}) => (
  <div>
    {match.params.id}
    <h3>ID: {match.params.id}</h3>
  </div>
)

export default ParamsExample;

Answer 1

读取<Route path="/:id" component={Child}/>定义了/:id的路径。 这描述了“/”后跟任何字符串的模式（尽管如果它找到另一个'/'它将停止匹配）。 当浏览器地址栏中的URL与此模式匹配时（例如“/ modus-create”），它将在名为id的参数（由:id部分定义）中存储“/”后面的字符串值。

<Links to="foo">呈现为<a href="{whatever.their.to.prop.says}">Link text</a> 。 它们附有一个点击/点击处理程序，通过添加新的href来更新浏览器的状态历史记录。

路由器将对象传递给与<Route>关联的组件，作为名为match的prop。 使用此对象，组件可以检查匹配的路径以及路由器提取的参数。 您可以使用读取<h3>ID: {match.params.id}</h3>的行的输出查看结果