javascript - 路线不匹配

Question

我不明白为什么这与我的 CompanyDetailContainer 路线不匹配。 Interview 容器的路由工作正常

      <IndexRoute component={HomePageContainer} />
      <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
      <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />

所以http://localhost:8080/interviews/companies/10点击interview路线很好但是http://localhost:8080/interviews/companies/501/details没有击中companydetail路线

更新:

我正在使用:

"react-router": "^3.0.0",
"react-router-dom": "^4.2.2",

原始代码:

import { IndexRoute, Router, Route, browserHistory } from 'react-router';

  <Router history={browserHistory} onUpdate={onUpdate}>
    <Route path="/">
      <IndexRoute component={HomePageContainer} />
      <Switch>
        <Route exact component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
        <Route exact component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
      </Switch>
      <Route component={About} name="about" path="about"  />
      <Route component={JobList} name="jobs" path="jobs"  />
    </Route>
    <Route component={Container} path="/"  />
    <Route component={NotFound} path="*"  />
  </Router>

精确地添加到我所拥有的内容中不起作用:

import { IndexRoute, Router, Route, browserHistory } from 'react-router';


  <Router history={browserHistory} onUpdate={onUpdate}>
      <Route path="/" component={HomePageContainer}>
        <Route component={InterviewContainer} exact name="interview" path="interviews/companies/:companyId" />
        <Route component={CompanyDetailContainer} exact name="companydetail" path="interviews/companies/:companyId/details" />
        <Route component={About} name="about" path="about" />
        <Route component={JobList} name="jobs" path="jobs" />
        <Route component={Container} path="/"  />
        <Route component={NotFound} path="*"  />
      </Route>

  </Router>

然后我尝试在它周围添加开关:

import { Router, Route, Switch, browserHistory } from 'react-router';

  <Router history={browserHistory} onUpdate={onUpdate}>
    <Switch>
      <Route path="/" component={HomePageContainer}>
        <Route component={InterviewContainer} exact name="interview" path="interviews/companies/:companyId" />
        <Route component={CompanyDetailContainer} exact name="companydetail" path="interviews/companies/:companyId/details" />
        <Route component={About} name="about" path="about" />
        <Route component={JobList} name="jobs" path="jobs" />
        <Route component={Container} path="/"  />
        <Route component={NotFound} path="*"  />
      </Route>
    </Switch>
  </Router>

现在我收到此错误:Cannot read property 'createRouteFromReactElement' of undefined 。我注意到我导入了 Switch没有解决，但这就是你导入 Switch 的方式对吗？

也不确定所有这些路由是否都应该是 <Route path="/" component={HomePageContainer}> 的子路由？请注意，我删除了 <IndexRoute />也根据建议。

Answer 1

React Router V4 分为两个包。一种用于 Web (DOM)，一种用于 native 。

因此，您不需要 react-router 依赖项，只需要 react-router-dom。

因此，请从 react-router-dom 导入组件:

import { BrowserRouter, Route, Switch } from 'react-router-dom'

然后，您可以将路由包装在 Switch 中，以便仅匹配一条路由。

如果您将详细信息路线放在其他路线之上，那么它应该首先匹配:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePageContainer} />
    <Route path="/interviews/companies/:companyId/details" component={CompanyDetailContainer} />
    <Route path="/interviews/companies/:companyId" component={InterviewContainer} />
    <Route path="/about" component={About} />
    <Route path="/jobs" component={JobList} />
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

另请注意，使用 React Router V4，您不会嵌套路由。相反，您可以在组件中添加其他路由。