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

React Router V4分为两个包。一个用于Web（DOM），一个用于Native。

因此，您不需要 react-router 依赖关系，只需 react-router-dom 。

因此，从 react-router-dom 导入组件：

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

然后，您可以将路线包裹在开关中，以便只匹配一条路线。

如果您将详细信息路由置于另一个之上，则它应首先匹配：

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

Answer 3

有两种可能的解决方案：

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

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

路线不匹配

3 个答案: