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参数

1 个答案: