路线不匹配

IT技术 javascript reactjs react-router-v4
2021-05-25 08:41:42

我不明白为什么这与我的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 />每个建议。

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

使用 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>

有两种可能的解决方案：

  1. 使用 a Switch，它用于仅渲染一条路线。

  2. 使用组件的exactprop Route，它仅在路径完全匹配时才呈现组件。

例如：

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

PS我认为你IndexedRoute在使用时不需要Switch（但你最好在你使用的版本的文档中检查它）

其它你可能感兴趣的问题
上一篇为什么为输入设置值在 Whatsapp 上不起作用？ 下一篇如何在chartjs2中绘制一条不同颜色的线？