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}
]

然后我将我的路线映射到 <Switch> 内，而 <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 被路径/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 的路由需要在顶部。