Question

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

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

http://localhost:3000/careers/designation

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

在此职位清单之后，如果我单击“应用”按钮上的任何特定职位，则URL将会像。 URL创建工作正常，但问题是加载最后一个组件。它停留在相同的组件上。

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

app-router.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文件，我在其中定义路径，但是当我单击Apply按钮时，它没有加载ApplyJob组件。它仅保留JobListing组件。

所有参数都是可选的。

Answer 1

尝试更改路线的顺序，类似这样，将您的 ApplyJob 路线向上移动

。

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

    </Switch>
)

如何在静态网址上加载不同的组件

1 个答案: