路线不匹配 [英] Route is not matched

问题描述

我不明白为什么这与我的 CompanyDetailContainer 路线不匹配.面试容器的路线工作正常

I can't figure out why this is not matching my route for the CompanyDetailContainer. The route for Interview container works fine

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

so http://localhost:8080/interviews/companies/10 命中 interview 路线很好但是 http://localhost:8080/interviews/company/501/details 未命中 companydetail 路线

so http://localhost:8080/interviews/companies/10 hits the interview route fine but http://localhost:8080/interviews/companies/501/details does not hit the companydetail route

更新:

我正在使用:

"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>

完全添加到我没有工作的地方:

adding just exact to what I had didn't work:

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>

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

Then I tried to add switch around it:

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>

现在我收到此错误:无法读取未定义的属性createRouteFromReactElement".我注意到我对 Switch 的导入没有解析，但你就是这样导入 Switch 的，对吗?

And now I get this error: Cannot read property 'createRouteFromReactElement' of undefined. I noticed my import for Switch is not resolving but that's how you import Switch right?

还不确定所有这些路由是否都应该是 的子路由?请注意，我也根据建议删除了 .

Also not sure if all those routes should be sub routes of <Route path="/" component={HomePageContainer}>? Note that I removed the <IndexRoute /> per suggestions too.

推荐答案

React Router V4 被拆分成两个包.一种用于 Web (DOM)，一种用于 Native.

React Router V4 is split out into two packages. One for Web (DOM) and one for Native.

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

Therefore, you don’t need the react-router dependency, just react-router-dom.

所以从 react-router-dom 导入组件:

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

然后您可以将您的路线包装在 Switch 中，以便只匹配一条路线.

You can then wrap your routes in a Switch so that only one route is matched.

如果你把你的详细信息路线放在另一个上面，那么它应该首先匹配:

If you put your details route above the other then it should match first:

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

Also note that with React Router V4, you don’t nest routes. Instead you can add additional routes within your components.

这篇关于路线不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！