路线不匹配 [英] 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屋!