javascript - 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 的路由需要在最上面。