路线不匹配

编程入门行业动态更新时间:2024-10-08 00:34:05

本文介绍了路线不匹配的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

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

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

so localhost:8080/interviews/companies/10 hits the interview route fine but 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:

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