Route is not matched

Question

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

      <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 hits the interview route fine but http://localhost:8080/interviews/companies/501/details does not hit the companydetail route

UPDATE:

I'm using:

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

original code:

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>

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.

Try adding the "exact" prop to the interview route, otherwise it will always match first, before the details route path is evaluated — Patrick Hund, Nov 13 '17 at 07:36
Looks like you are using some version of RR before v4... when posting questions, try to specify the version, especially in case of React Router. — Dane, Nov 13 '17 at 08:11
Looking at the version info, I think that you are doing a mistake by importing different versions of `react-router` and `react-router-dom`. See this thread: https://github.com/ReactTraining/react-router/issues/4648#issuecomment-284479720 **Long story short, you only need to import `react-router-dom`, not both** — Dane, Nov 14 '17 at 06:05
All: have not had a chance to try more. Will be back soon to report my progress — PositiveGuy, Nov 14 '17 at 06:07

score 1 · Answer 1 · answered Nov 13 '17 at 07:38

Reverse the two routes with a wrapping with 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>

Steve Holgado · Accepted Answer · 2017-11-13T18:57:57.693

React Router V4 is split out into two packages. One for Web (DOM) and one for Native.

Therefore, you don’t need the react-router dependency, just react-router-dom.

So import the components from react-router-dom instead:

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

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:

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

Also note that with React Router V4, you don’t nest routes. Instead you can add additional routes within your components.

one problem is the '/' works but all other routes when hit, bring me to a blank page. I've created a new stack post on that issue https://stackoverflow.com/questions/47301303/route-redirects-to-nothing-react-router-4 — PositiveGuy, Nov 15 '17 at 07:19

Dane · Answer 3 · 2017-11-13T08:19:32.120

0

There are 2 possible solutions:

Use a Switch, which is used to exclusively render just one route.
Use the exact prop of the Route component, which renders the component only if the path is an exact match.

Eg:

<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. I think you wouldn't need IndexedRoute when using Switch ( but you better check it in the docs of the version you are using)

edited Nov 13 '17 at 08:19

answered Nov 13 '17 at 08:05

Dane

9,242
5
33
56

have not had a chance to revisit today, probably tomorrow or sometime this week. – PositiveGuy Nov 14 '17 at 05:00

Route is not matched

3 Answers3

Related