路线不匹配

Question

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

      <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

用 Switch 换行反转两条路由：

import {Switch} from 'react-router';

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

Answer 2

有 2 种可能的解决方案：

使用 Switch，用于独占只渲染一条路线。
使用 Route 组件的 exact 属性，仅当路径完全匹配时才渲染组件。

例如：

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

P.S. 我认为你在使用 Switch 时不需要 IndexedRoute （但你最好在您正在使用的版本）

Answer 3

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，您不会嵌套路由。相反，您可以在组件中添加其他路由。

路线不匹配

Route is not matched

javascript

reactjs

react-router-v4