Question

我问这个问题只是想确保我正确理解React Router v4中的动态嵌套路由。我想构建一个类似于this one的黑客新闻客户端。但是我陷入了动态路线的困境。

在React Router v4中，如果我使用match对象在网上关注其他教程，我会有类似的东西（一个超级简单的）：

const ChildComponent = ({rows, match}) => (
  <div>
    <ol>
      rows.map((row, i) => {
        return (
           <li key={row.id}>
            <a href={row.url}>row.title</a> // topic title
            <Link to=`${match.url}/${row.by}`>row.by</Link> // topic author
           </li>

        )
      }
    </ol>
    <Route path=`${match.url}/:userId` render={(props) => <UserProfile fetchUserData={fetchUserData} {...props} />} />
  </div>
)};

当我们渲染父组件时，我们通常使用类似的东西进行路由：

<Switch>
    <Route path="/" render={Home} />
    <Route path="/topics" render={(props) => <ChildComponent rows={rows} {...props} /> } />
    <Route path="*" render={() => <div>Not Found</div>} />
</Switch>

但这对于这种情况并不理想，因为当我点击查看作者的信息时，我需要显示这样的网址：＆＃34; http://mysite/user/userid＆＃34;而不是当前的＆＃34; http://mysite/news/userid＆＃34;。

但是，如果我将${match.url}/${row.by}更改为/user/${row.by}并将${match.url}/:userId更改为/user/:userId，则无法在应用中识别该路线。简单地跳过以/user/开头的路线，它将直接进入应用程序的NotFound路线（如果有的话），它位于父组件中。如果我不在路由中使用${match.url}，为什么子组件中的链接会尝试匹配父组件中的路由？

我为您添加了demo，以便更轻松地了解此问题。

Answer 1

因为当您点击context链接时，应用会解析路由器的/user/:userId:以查看是否匹配。如果不是，则回退到Switch。在您的情况下，您没有在*中指定处理Switch的任何内容。

您需要将 userId /user声明移至Route，因为它们不会共享相同的第一条路线（Switch！== /user）。

/topics

React Router v4动态嵌套路由不匹配

1 个答案: