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.

回答1:

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.

回答2:

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>

回答3:

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)

来源：https://stackoverflow.com/questions/47259160/route-is-not-matched

标签

javascript

reactjs

react-router-v4