CODEWITHSUNDEEP
reactjsreact-router
Shashika Virajh
Shashika Virajh

Reputation: 9487

React-router doesnt work after upgrading from 0.13 to 2.8.1

I upgraded my react-router from version 0.13 to 2.8.1, Then it give an error saying that "Failed to load resource: the server responded with a status of 404 (Not Found)".

This is my code.

import React from 'react'
import Router from 'react-router'

import App from './components/app';
import Main from './components/main';
import CreateOrganization from './components/create-organization';
import ManageUsers from './components/manage-users';
import FldList from './components/fld-list';
import FldView from './components/fld-view';
import WeighIn from './components/weigh-in';
import MatchFlds from './components/match-flds';
import NotFound from './components/not-found';

var { Route, DefaultRoute, NotFoundRoute } = Router;

var routes = (
    <Route handler={App}>
        <DefaultRoute handler={Main} />
        <Route name="CreateOrganization" path="create-organization" handler={CreateOrganization}></Route>
        <Route name="manageUsers" path="manage-users" handler={ManageUsers}></Route>
        <Route name="fldList" path="fld-list" handler={FldList}></Route>
        <Route name="fldView" path="fld-view/:fldId" handler={FldView}></Route>
        <Route name="weighIn" path="weigh-in" handler={WeighIn}></Route>
        <Route name="matchFlds" path="match-flds" handler={MatchFlds}></Route>
        <NotFoundRoute handler={NotFound} />
    </Route>
);

Router.run(routes, function (Handler) {
    React.render(<Handler />, document.getElementById('react-container'));
});

What should I do here to resolve this error?

Upvotes: 2

Views: 503

Answers (2)

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

This answer has been tested on React Router ver 2.7.0

Version 2 of React Router introduced the concepts of IndexRoute, browserHistory.

The rough outline of how you could configure your routes is below. Please review the official docs to adjust it to your use case.

import { Router, Route, IndexRoute, browserHistory } from 'react-router';

var routes = (
    <Router history={browserHistory}>
      <Route path="/" component={App} />
        <IndexRoute component={Main} />
        <Route path="create-organization" component={CreateOrganization} />
        <Route path="manage-users" component={ManageUsers} />
        <Route path="fld-list" component={FldList} />
        <Route path="fld-view/:fldId" component={FldView} />
        <Route path="weigh-in" component={WeighIn} />
        <Route path="match-flds" component={MatchFlds} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
);

React.render(
  routes,
  document.getElementById('react-container')
);

// Also, in newer versions of React you can use ReactDOM for mounting your app.
// import ReactDOM from 'react-dom'
//ReactDOM.render(
//  routes,
//  document.getElementById('react-container')
//);

Upvotes: 5

Chris
Chris

Reputation: 59541

Certain changes have happened to the API and some components have been replaced or become deprecated. Please have a look at the API here and read the upgrade guide here.

Your route should work if you make the following changes:

<Route path="/" component={App}>
  <IndexRoute component={Main} />
  <Route name="CreateOrganization" path="create-organization" component={CreateOrganization}></Route>
  <Route name="manageUsers" path="manage-users" component={ManageUsers}></Route>
  <Route name="fldList" path="fld-list" component={FldList}></Route>
  <Route name="fldView" path="fld-view/:fldId" component={FldView}></Route>
  <Route name="weighIn" path="weigh-in" component={WeighIn}></Route>
  <Route name="matchFlds" path="match-flds" component={MatchFlds}></Route>
  <Route path="**" component={NotFound} />
</Route>

You also need to replace this:

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.getElementById('react-container'));
});

with:

import createBrowserHistory from 'history/lib/createBrowserHistory'
let history = createBrowserHistory()
render(<Router history={history}>{routes}</Router>, el)

Here's a brief list of changes (not all) to take note of:

  • The handler property is now called component
  • The <DefaultRoute> component is now called <IndexRoute>
  • The <NotFoundRoute> component is now deprecated. Use a "catch-all" pattern. Either * or ** (non-greedy vs greedy - read the docs).

Upvotes: 2

Related Questions