Javascript 路线不匹配

我不明白为什么这与我的

CompanyDetailContainer

路线不匹配。面试的路线很好

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

原始代码：

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>

从'react Router'导入{IndexRoute，Router，Route，browserHistory}；

加上我没有用的东西：

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>

从'react Router'导入{IndexRoute，Router，Route，browserHistory}；

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

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>

从'react Router'导入{Router，Route，Switch，browserHistory}；

现在我得到了这个错误：

无法读取未定义的

的属性“createRouteFromReactElement”。我注意到我导入的

开关

没有解析，但这就是导入

开关

的方式，对吗

---

还不确定是否所有这些路线都应该是

的子路线？请注意，我也根据建议删除了

。

使用带开关的包装反转两条路线：

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>

从'react router'导入{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>

从'react router'导入{Switch}；

有两种可能的解决方案：

使用，它仅用于渲染一条管线

使用

路由

组件的道具，该道具仅在路径完全匹配时渲染组件

例如：

---

p.S.我认为在使用

开关时，您不需要
indexedolote
（但您最好在您使用的版本的文档中检查它）
有两种可能的解决方案：

使用，它仅用于渲染一条管线

使用
路由
组件的道具，该道具仅在路径完全匹配时渲染组件

例如：



p.S.我想在使用
交换机时，您不需要
indexedoute
（但您最好在您使用的版本的文档中进行检查）
React路由器V4分为两个包。一个用于Web（DOM），一个用于本机

因此，您不需要反应路由器依赖项，只需要反应路由器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，您不需要嵌套路由。相反，您可以在组件中添加其他路由。
React路由器V4分为两个包。一个用于Web（DOM），一个用于本机

因此，您不需要反应路由器依赖项，只需要反应路由器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，您不需要嵌套路由。相反，您可以在组件中添加其他路由。
尝试将“精确”道具添加到面试路由，否则在评估详细路由路径之前，它将始终首先匹配。看起来您使用的是v4之前的某个版本的RR。。。发布问题时，请尝试指定版本，尤其是React Router。查看版本信息，我认为您导入不同版本的
React Router
和
React Router dom
是一个错误。查看此线程：长话短说，您只需要导入
react router dom
，而不是bothAll:没有机会尝试更多。将很快回来报告我的进度尝试将“精确”道具添加到面试路线，否则它将始终首先匹配，然后再评估详细路线路径看起来您正在使用v4之前的RR版本。。。发布问题时，请尝试指定版本，尤其是React Router。查看版本信息，我认为您导入不同版本的
React Router
和
React Router dom
是一个错误。查看此线程：长话短说，您只需要导入
react router dom
，而不是bothAll:没有机会尝试更多。将很快回来报告我的进度今天，可能明天或本周某个时候没有机会再次访问。今天，可能明天或本周某个时候没有机会再次访问。一个问题是“/”有效，但所有其他路线被击中时，请将我带到空白页。我已经在这个问题上创建了一个新的堆栈帖子。一个问题是“/”可以工作，但所有其他路径在被击中时，会将我带到一个空白页。我已经在这个问题上创建了一个新的堆栈帖子