React Router 中的中间 URL 参数

Question

我正在尝试路由一条带有中间参数的路径。这是我的路线的样子。

import Events from "./views/EventsView";
import Event from "./views/EventView";
import NotFound from "./views/NotFoundView";
import RegistrationView from "./views/RegistrationView"

export default [
  {path: "/", component: Events, exact: true},
  {path: "/events", component: Events, exact: true},
  {path: "/events/:projectId", component: Event, exact: true},
  {path: "/events/:projectId/register", component: RegistrationView, exact: true},
  {component: NotFound}
]

然后我将我的路线映射到 a <Switch>which 中 a 中<Router>。

<Switch>
    {
        return routes.map(({path, component, exact}, key) =>
            <Route key={key} path={path} component={component} exact={exact}/>)
}
</Switch>

我Link用来访问Event组件。

<Link to="/events/1234">Title Here</Link>

问题

问题是我 /events/:projectId被 path 覆盖了/events/:projectId/register。所以每次我尝试访问我的Event组件时。我得到了 RegistrationView 返回。我尝试更改exact值或删除<Switch>它，但似乎不能那样工作。有人对这个有问题吗？你是如何解决这个问题的？

Answer 1

{path: "/events/:projectId/register", component: RegistrationView, exact: true},

{path: "/events/:projectId", component: Event, exact: true},

带有 :projectId/register 的路由需要在上面。