Question

我正在使用反应路由在页面之间导航。此导航具有子链接，上层连结1 家长连结2 一种。父/子链接1 b。父/子链接2

a。父/子链接1 b。父/子链接2 C。父/子链接3

如何在react-router中实现此导航。请参阅带有此帖子的附件图像，以对我的查询有清楚的了解。

No formulae at all were found in taps #2387

Answer 1

class App extends Component {
  render() {
    return (
      <Router>
        <div style={{width: 1000, margin: '0 auto'}}>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/topics'>Topics</Link></li>
          </ul>

          <hr />

          <Route exact path='/' component={Home} />
          <Route path='/topics' component={Topics} />
        </div>
      </Router>
    )
  }
}

在这一点上，”包含路径和组件。当您应用的当前位置与路径匹配时，组件将被呈现。否则，Route将呈现null。”

function Topics () {
  return (
    <div>
      <h1>Topics</h1>
      <ul>
        {topics.map(({ name, id }) => (
          <li key={id}>
            <Link to={`/topics/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`/topics/:topicId`} component={Topic}/>
    </div>
  )
}

当我们转到 / topics 时，将显示“主题”组件。然后，主题会渲染一个导航栏和一条新路线，该路线将与我们刚刚渲染的导航栏中的任何链接相匹配（，因为链接已链接到/ topics / $ {id} ，并且该路由与 / topics /：topicId 匹配）。这意味着如果我们单击“主题”组件中的任何链接。

值得注意的是，仅因为我们匹配了另一个Route组件，并不意味着仍旧没有匹配的先前Routes。这就是使很多人困惑的地方。请记住，将Route视为呈现另一个组件或为null。您在React中嵌套普通组件的想法可以直接应用于嵌套Routes 。

在这一点上，我们进展顺利。如果由于某种原因，您团队中的另一个不熟悉React Router的成员决定将/ topics更改为/ concepts，该怎么办？他们可能会转到主要的App组件并更改Route

// <Route path='/topics' component={Topics} />
<Route path='/concepts' component={Topics} />

问题是，这完全破坏了应用程序。在“主题”组件内部，我们假设路径以/ topics开头，但现在已更改为/ concepts。我们需要的是让Topics组件接收任何作为道具的初始路径的方法。这样，无论有人更改父路线，它都将始终有效。对我们来说，好消息是React Router确实做到了这一点。每次使用React Router渲染组件时，都会向该组件传递三个道具-位置，匹配和历史记录。我们关心的是比赛。 match将包含有关路线如何匹配的信息（正是我们所需要的）。具体来说，它具有我们需要的两个属性：path和url。这些非常相似，这就是文档描述它们的方式-

path-用于匹配的路径模式。对于构建嵌套路线有用

url-URL的匹配部分。对于构建嵌套链接有用

假设我们使用的应用程序嵌套了路线，并且当前URL为 / topics / react-router / url-parameters。

如果我们将 match.path和match.url 记录在嵌套最多的组件中，则将获得以下结果。

render() {
  const { match } = this.props // coming from React Router.

  console.log(match.path) // /topics/:topicId/:subId

  console.log(match.url) // /topics/react-router/url-parameters

  return ...
}

请注意，路径包括URL参数，而 url 只是完整的URL。这就是为什么一个用于链接，另一个用于路由的原因。

在创建嵌套链接时，您不想使用URL参数。您希望用户直接进入 / topics / react-router / url-parameters 。这就是 match.url 对于嵌套链接更好的原因。但是，当您将某些模式与 Route 匹配时，您想要包括URL参数-这就是为什么 match.path 用于嵌套路由的原因>。

React Router-使用子路由浏览内页

1 个答案: