Strecke ist nicht abgestimmt

Question

ich kann nicht herausfinden, warum dies nicht meine Route für die CompanyDetailContainer ist passend. Die Route für Interview Behälter funktioniert

 <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 trifft die interview Strecke in Ordnung, aber http://localhost:8080/interviews/companies/501/details trifft nicht die companydetail Route

UPDATE:

Ich verwende:

"react-router": "^3.0.0", 
"react-router-dom": "^4.2.2", 

Originalcode:

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> 

Zugabe nur genau zu dem, was ich hatte nicht funktioniert:

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> 

Dann habe ich versucht Schalter um es hinzuzufügen:

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> 

Und jetzt bekomme ich diesen Fehler: Cannot read property 'createRouteFromReactElement' of undefined . Ich habe bemerkt, dass mein Import für Switch nicht auflöst, aber das ist, wie Sie Switch richtig importieren?

auch nicht sicher, ob alle diese Strecken sollten Teilwege <Route path="/" component={HomePageContainer}> sein? Beachten Sie, dass ich auch die <IndexRoute /> per Vorschläge entfernt habe.

Answer 1

Reagieren Router V4 in zwei Pakete aufgeteilt geführt wird. Eine für Web (DOM) und eine für Native.

Daher brauchen Sie nicht die reagieren-Router Abhängigkeit, nur reagieren-Router-dom.

importieren So die Komponenten aus react-Router-dom statt:

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

Anschließend können Sie Ihre Routen in einem Schalter wickeln, so dass nur eine Route abgestimmt ist.

Wenn Sie Ihre Details Route übereinander legen, dann sollte es zuerst entsprechen:

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

Beachten Sie auch, dass mit Router V4 Reagieren Sie nicht nisten Routen. Stattdessen können Sie zusätzliche Routen innerhalb Ihrer Komponenten hinzufügen.

Answer 2

die beiden Strecken mit einer Verpackung mit Schalter Rückseite:

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 3

Es gibt 2 mögliche Lösungen:

1. Verwenden Sie ein Switch, die ausschließlich machen nur einer Route verwendet wird.

2. Verwenden Sie die exact Prop von der Route Komponente, die die Komponente nur darstellt, wenn der Pfad genau übereinstimmt.

ZB:

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

P. S. Ich glaube, Sie würden IndexedRoute nicht brauchen, wenn Switch mit (aber Sie besser überprüfen Sie es in der Dokumentation der von Ihnen verwendeten Version)