CODEWITHSUNDEEP
reactjsreact-router
Andreas Köberle
Andreas Köberle

Reputation: 110892

React Router routes but show error message

I'm using react router 1.0.0-rc1 and redux.

this are the routes:

<Route path=""component={Body}>
    <Route path="machines/:id" component={SingleMachineView}/>
    <IndexRoute component={Dashboard}/>
    <Route path="*" component={Dashboard}/>
</Route>

this is the link:

<Link to={`machines/${machine.machine_id}`}> 
  {machine.name} 
</Link>

this how the router is started:

class Root extends React.Component {

  render() {

    const history = createHashHistory();

    return (
      <Provider store={store}>
        {() => <Router history={history} children={Routes}/>}
      </Provider>
    );
  }
}

ReactDOM.render(<Root/>, document.getElementById('app'));

Everything works as expected, but when I click the link and the new view is rendered I still get an error message in the console:

Warning: Location "machines/id2" did not match any routes

Also the error message doesn't appear when I load the app with path localhost:8080/#/machines/id2

Upvotes: 2

Views: 1151

Answers (2)

Andreas K&#246;berle
Andreas K&#246;berle

Reputation: 110892

The problem was that the link as to start with a /:

<Link to={`/machines/${machine.machine_id}`}> 
  {machine.name} 
</Link>

Upvotes: 1

Clarkie
Clarkie

Reputation: 7550

In my use of the router either the router or the browser adds a leading / as in your example in the comments.

I'd suggest you create a root route with a / instead of a blank string:

<Route path="/"component={Body}>
    <Route path="machines/:id" component={SingleMachineView}/>
    <IndexRoute component={Dashboard}/>
    <Route path="*" component={Dashboard}/>
</Route>

Upvotes: 0

Related Questions