2

我有三页应用程序，其中第一页的 URL 带有菜单名称，例如 - http://localhost:3000/careers/ ，第二页加载了列表页面，它的 URL 是可选参数，例如，如果我选择技能，那么它将附加

http://localhost:3000/careers/skills

如果我选择指定，那么它将附加

http://localhost:3000/careers/designation

或者它可以附加两个参数，如 http://localhost:3000/careers/skills/designation

在此职位列表出现后，如果我单击“应用”按钮上的任何特定职位，那么 URL 将是这样的。URL 创建工作正常，但问题是加载最后一个组件。它停留在同一个组件上。

http://localhost:3000/careers/jobID=12345，在这种情况下，职业将是静态的。

应用路由器.js

const AppRouter = () => (
    <Switch>
      <Route path="/careers" exact component={Careers1} />
      <Route path="/:keyword?/:skills?/:designation?/:location?" component={JobListing} />
      <Route path="/:jobID=?" component={ApplyJob} />
    </Switch>
)

这是我定义路径的 app-router.js 文件，但是当我单击应用按钮时，它没有加载 ApplyJob 组件。它只保留 JobListing 组件。

所有参数都是可选的。

4

1 回答 1

0

尝试更改Routes的顺序，像这样，将ApplyJob Route 上移一步。

const AppRouter = () => (
    <Switch>
      <Route path="/careers" exact component={Careers1} />
      <Route path="/:jobID=?" component={ApplyJob} />
      <Route path="/:keyword?/:skills?/:designation?/:location?" component={JobListing} 
     />

    </Switch>
)
于 2019-01-11T08:41:47.550 回答