CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
PositiveGuy
PositiveGuy

Reputation: 20182

Route is not matched

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.

Upvotes: 0

Views: 212

Answers (3)

Steve Holgado
Steve Holgado

Reputation: 12071

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.

Upvotes: 1

Dane
Dane

Reputation: 9552

There are 2 possible solutions:

  1. Use a Switch, which is used to exclusively render just one route.

  2. 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)

Upvotes: 0

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93193

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>

Upvotes: 1

Related Questions