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

React Router 中间 URL 参数

Middle URL Parameter in React Router

javascript

reactjs

react-router

react-router-v4

react-router-dom