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

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>

但这并不适合这种情况，因为当我点击查看作者的信息时，我需要显示一个这样的网址：“http://mysite/user/userid”而不是当前的“http://mysite/news/userid”。

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

我添加了一个demo 让您更容易理解这个问题。

Answer 1

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

您需要将 userId Route 声明移动到 Switch，因为它们不会共享相同的第一条路线 (/user !== /topics)。

<Switch>
    <Route path="/" render={Home} />
    <Route path="/topics" render={(props) => <ChildComponent rows={rows} {...props} /> } />
    <Route path="/user/:userId" render={(props) => <UserProfile fetchUserData={fetchUserData} {...props} />} />
    <Route render={() => <div>Not Found</div>} />
</Switch>