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的参数中（由{{1定义）部分）。

:id呈现为<Links to="foo">。它们附加了一个点击/点击处理程序，通过添加新的href来更新浏览器的状态历史记录。

路由器将对象传递给与<a href="{whatever.their.to.prop.says}">Link text</a>关联的组件，作为名为<Route>的道具。使用此对象，组件可以检查匹配的路径以及路由器提取的参数。您可以使用读取match

的行的输出查看结果

反应路由器v4匹配

1 个答案: